Question

希望你能帮我解决这个烦人的问题。

我目前正在为Mobile Safari（iOS7）构建一个优化的网络应用程序。我希望我的页面是视口的100％高度。目前我的页面比视口大，甚至认为我已经将css中的高度指定为100％。

解决这个问题的方法是改变这个：

<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, initial-scale=1.0" />

删除height=device-height

问题是没有高度元标记，当我触摸/单击输入字段时（页面显示键盘时），页脚会在页面上向上推。我可以选择固定的键盘/输入或正确的页面高度:(不理想。

你们中的任何人都遇到过这个问题，并找到了解决这两个问题的解决方案吗？

Answer 1

我找到了解决问题的方法。它不理想，因为我真的不想避免js在我的应用程序中设置样式。但这段jquery javascript似乎有效：

$('.page').css('height',$(window).height()+'px');

假设“.page”是您的整页容器。

Answer 2

我假设你有一个位置的页脚：固定，这在safari mobile中很烦人。我不能确定没有看到更多的代码，但试试这个：

从中删除width = device-width，height = device-height 视口元标记。
使用此CSS：

html，身体 { 宽度：100％; 身高：100％; 溢出：隐藏; }
在页脚中使用position：absolute而不是position：fixed。

<强> EDITED

我根据您发布的内容创建了这个简单的页面。我用我的iPad打开它，它工作正常。当我点击输入字段时，键盘向上滑动，但页脚仍保留在原位（隐藏在键盘下方）。

html测试页：

    <!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0" />
            <meta name="apple-mobile-web-app-capable" content="yes" />
            <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <style>
            * {
               -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
                -moz-box-sizing: border-box;    /* Firefox, other Gecko */
                box-sizing: border-box;         /* Opera/IE 8+ */
            }

            html, body {
                width: 100%;
                height: 100%;
                overflow: hidden;
            }

            .page {
                background: red;
                width: 100%;
                position: absolute;
                height: 100%;
                padding: 25px;
            }

            footer {
                width: 100%;
                position: absolute;
                bottom: 0;
                left: 0;
                height: 200px;
                background: blue;
                padding: 25px;
            }

            input { width: 200px; }
        </style>
    </head>
    <body>
        <div class="page">
            <h1>Page</h1>
            <input type="text" />
            <footer>
                <h2>Footer</h2>
            </footer>
        </div>
    </body>

亲自试试并告诉我。

已编辑尝试添加我添加到头部的两个新元标记。

网络应用程序 - 设备高度/键盘问题

2 个答案: