Javascript web应用-设备高度/键盘问题_Javascript_Html_Css_Ios7_Mobile Safari

Javascript web应用-设备高度/键盘问题

javascript html css ios7

Javascript web应用-设备高度/键盘问题,javascript,html,css,ios7,mobile-safari,Javascript,Html,Css,Ios7,Mobile Safari,希望你能帮我解决这个烦人的问题我目前正在为Mobile Safari（iOS7）构建一个经过优化的web应用程序。我希望我的页面是视口的100%高度。目前我的页面比视口大，尽管我在css中将高度指定为100% 此问题的解决方案是更改以下内容： <meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, initial-scale=1.0" /> 通过移除h

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

我目前正在为Mobile Safari（iOS7）构建一个经过优化的web应用程序。我希望我的页面是视口的100%高度。目前我的页面比视口大，尽管我在css中将高度指定为100%

此问题的解决方案是更改以下内容：

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

通过移除

height=设备高度

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

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

我想你们有一个带有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>


* {
-webkit盒尺寸：边框盒；/*Safari/Chrome，其他webkit*/
-moz盒大小：边框盒；/*Firefox，其他壁虎*/
盒尺寸：边框盒；/*Opera/IE 8+*/
}
html，正文{
宽度：100%；
身高：100%；
溢出：隐藏；
}
.第页{
背景：红色；
宽度：100%；
位置：绝对位置；
身高：100%；
填充：25px；
}
页脚{
宽度：100%；
位置：绝对位置；
底部：0；
左：0；
高度：200px；
背景：蓝色；
填充：25px；
}
输入{宽度：200px；}
页
页脚

你自己试试，告诉我

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

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

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

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

感谢您帮助Oscar，html，body css是您推荐的。我的页脚已经定位为绝对位置。这是一个快速的示例：我复制了您的代码并进行了测试，似乎这个坏男孩弄乱了页脚的键盘/布局。如果删除了此元标记，效果会很好。因此，一个独立的web应用程序似乎有问题。有没有关于如何修复它的建议？它会以何种方式破坏它？请解释。啊，你是在iPad或iPhone上测试它吗？我已经在iPad Mini（视网膜）上测试过了iPhone 4和iPhone 4都出现了问题。我在这里上传了html：如前所述，只有当应用程序保存为主屏幕上的应用程序时，问题才会出现。在safari中，它工作正常。我在答案中添加了两个新的元标记。试着使用它们。对我来说，它工作正常。我也有同样的问题，所以我在con上解决了定义

min height

的问题帐篷页。