javascript Web 应用程序 - 设备高度/键盘问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/22141679/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
web app - device-height / keyboard issue
提问by Michael Falck Wedelg?rd
hope you are able to help me with this annoying problem.
希望你能帮我解决这个烦人的问题。
I'm currently building a web-app optimizied for Mobile Safari (iOS7). I want my page to be 100% height of the viewport. Currently my page is bigger than the viewport even thought I have specified the height in the css to 100%.
我目前正在构建一个针对 Mobile Safari (iOS7) 优化的网络应用程序。我希望我的页面是视口的 100% 高度。目前我的页面比视口大，甚至认为我已将 css 中的高度指定为 100%。
The solution to this problem was changing this:
这个问题的解决方案是改变这个：
<meta name="viewport" content="user-scalable=no, width=device-width, height=device-height, initial-scale=1.0" />
by removing height=device-height
通过去除 height=device-height
the problem is without the height meta tag, the footer is pushed up on the page when I touch/click an input field (when the keyboard shows up). As is I can choose fixed keyboard/input or correct page height :( Not ideal.
问题是没有高度元标记，当我触摸/单击输入字段时（当键盘出现时）页脚被向上推到页面上。我可以选择固定的键盘/输入或正确的页面高度:( 不理想。
Anyone of you have had this issue, and found a solution where both problems are fixed?
你们中的任何人都遇到过这个问题，并找到了解决这两个问题的解决方案？
回答by Michael Falck Wedelg?rd
I found a way to solve the problem. Its not ideal since I really wan't to avoid js to set styling in my app. But this piece of jquery javascript seems to work:
我找到了解决问题的方法。它并不理想，因为我真的不想避免 js 在我的应用程序中设置样式。但是这段 jquery javascript 似乎有效：
$('.page').css('height',$(window).height()+'px');
Assuming ".page" is your full-page container.
假设“.page”是您的整页容器。
回答by Oscar Paz
I assume you've got a footer with position: fixed, which is annoying in safari mobile. I can't be sure without seeing more code, but try this:
我假设您有一个带有 position: fixed 的页脚，这在 safari mobile 中很烦人。如果没有看到更多代码，我无法确定，但试试这个：
- Remove both width=device-width, height=device-height from the viewport meta tag.
Use this CSS:
html, body { width: 100%; height: 100%; overflow: hidden; }
Use position:absolute in you footer instead of position: fixed.
- 从视口元标记中删除 width=device-width, height=device-height 。
使用这个 CSS：
html, body { 宽度: 100%; 高度：100%；溢出：隐藏；}
在页脚中使用位置：绝对而不是位置：固定。
EDITED
已编辑
I created this simple page based on the content you posted. I opened it with my iPad and it works fine. When I tap on the input field, the keyboard slides up, but the footer remains in place (hidden under the keyboard).
我根据您发布的内容创建了这个简单的页面。我用我的 iPad 打开它，它工作正常。当我点击输入字段时，键盘会向上滑动，但页脚保持原位（隐藏在键盘下方）。
html test page:
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>
Try it yourself and tell me.
你自己试试然后告诉我。
EDITEDTry adding the two new meta tags I added to the head.
已编辑尝试添加我添加到头部的两个新元标记。
