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

【问题标题】：web app - device-height / keyboard issue网络应用程序 - 设备高度/键盘问题
【发布时间】：2014-04-04 04:49:31
【问题描述】：

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

我目前正在构建一个针对 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

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

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

【问题讨论】：

我遇到了同样的问题，所以我在内容页面上定义了min-height。

标签： javascript html css ios7 mobile-safari

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

我假设您有一个带有 position: fixed 的页脚，这在 safari mobile 中很烦人。如果没有看到更多代码，我无法确定，但试试这个：

从视口元标记。
使用这个 CSS：

html，正文 { 宽度：100%；高度：100%；溢出：隐藏； }
在页脚中使用 position:absolute 而不是 position: fixed。

已编辑

我根据您发布的内容创建了这个简单的页面。我用我的 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>

你自己试试然后告诉我。

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

【讨论】：

感谢您帮助 Oscar，html,body css 符合您的建议。我的页脚已经定位为绝对。这是一个外观的简单示例：Code link
我已经复制了您的代码并对其进行了测试，似乎这个坏男孩弄乱了页脚的键盘/布局。如果删除此元标记，它可以正常工作。所以一个独立的网络应用程序，似乎有这个问题。有关如何解决它的任何建议？
它以何种方式搞砸了？请解释。啊，你是在 iPad 还是 iPhone 上测试它？
我在 iPad Mini (retina) 和 iPhone 4 上进行了测试，两者都出现了问题。我在此处上传了 html：website 如上所述，仅当应用程序在主屏幕上保存为应用程序时才会出现问题。在 Safari 中效果很好。
我在答案中添加了两个新的元标记。尝试使用它们。它对我来说很好。