IOS 7 - css - html 高度 - 100% = 692px
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18855642/
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
IOS 7 - css - html height - 100% = 692px
提问by Pedro Garcia Mota
I have a weird bug on iPad iOS7 landscape mode.
我在 iPad iOS7 横向模式上有一个奇怪的错误。
What i was able to investigate is that in iOS7 window.outerHeight is 692px and window.innerHeight 672px; while in previous versions both values are 672px.
我能够调查的是，在 iOS7 window.outerHeight 是 692px 和 window.innerHeight 672px; 而在以前的版本中，两个值都是 672px。
Even though my <html>and <body>tags have height 100% there seems to be space for scrolling, and the weird thing is that this problem only shows up on landscpae
尽管 my<html>和<body>标签的高度为 100%，但似乎有滚动空间，而且奇怪的是，这个问题只出现在 landscpae 上
You can see what i am talking about by visiting t.cincodias.com, for example, in a iOS 7 iPad the footer bar (or the header sometimes) will be cut. But on previous iOS versions the content displays fine at fullscreen.
您可以通过访问 t.cincodias.com 了解我在说什么，例如，在 iOS 7 iPad 中，页脚栏（或有时是页眉）将被剪切。但在以前的 iOS 版本中，内容在全屏时显示良好。
Even when i set the height of both tags to height: 672px !importantand position:absolute; bottom: 0;, you can still scroll the content vertically by touching an iframe (the ads are iframes).
即使我将两个标签的高度都设置为height: 672px !important和position:absolute; bottom: 0;，您仍然可以通过触摸 iframe（广告是 iframe）来垂直滚动内容。
I'm running the release candidate version of iOS7
我正在运行 iOS7 的候选发布版本
thanks for any help.
谢谢你的帮助。
回答by czuendorf
I used this JavaScript solution for solving that problem:
我使用这个 JavaScript 解决方案来解决这个问题：
if (
navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) &&
window.innerHeight != document.documentElement.clientHeight
) {
var fixViewportHeight = function() {
document.documentElement.style.height = window.innerHeight + "px";
if (document.body.scrollTop !== 0) {
window.scrollTo(0, 0);
}
};
window.addEventListener("scroll", fixViewportHeight, false);
window.addEventListener("orientationchange", fixViewportHeight, false);
fixViewportHeight();
document.body.style.webkitTransform = "translate3d(0,0,0)";
}
回答by ururk
I believe this is a bug in iOS 7 - if you rotate it to portrait mode, it sets both (innerHeight/outerHeight) to the same value. If it isn't a bug, then portrait mode has one because the behavior isn't consistent.
我相信这是 iOS 7 中的一个错误——如果你将它旋转到纵向模式，它会将两者 (innerHeight/outerHeight) 设置为相同的值。如果它不是错误，那么纵向模式就有一个，因为行为不一致。
You could detect iOS 7/mobile Safari and use window.innerHeight if iOS 7.
如果 iOS 7，您可以检测 iOS 7/移动 Safari 并使用 window.innerHeight。
回答by agfa555
I'll combine the answers. Thanks all!
我将结合答案。谢谢大家！
You can do something like this:
你可以这样做：
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
$('#yourDivID').height(window.innerHeight);
window.scrollTo(0, 0);
}
The window.scrollTo solves the issue of the bar overlapping in landscape when rotating.
window.scrollTo 解决了横条在旋转时横向重叠的问题。
Cheers!
干杯!
回答by Eric Chen
I reproduce the same problem in iOS 8.
我在 iOS 8 中重现了同样的问题。
Here is my solution.
这是我的解决方案。
I listened resize, scroll, orientationChangeevent, to ensure when user trigger screen size change, will call reset height function.
我监听了resize, scroll, orientationChange事件，确保当用户触发屏幕尺寸改变时，会调用重置高度函数。
I wrote a debounceto prevent multiple call.
我写了一个debounce来防止多次调用。
And It's in a closureand no dependent(no jQuery).
它在一个闭包中并且没有依赖（没有 jQuery）。
(function(){
var setViewportHeight = (function(){
function debounced(){
document.documentElement.style.height = window.innerHeight + "px";
if (document.body.scrollTop !== 0) {
window.scrollTo(0, 0);
}
}
var cancelable = null;
return function(){
cancelable && clearTimeout(cancelable);
cancelable = setTimeout(debounced, 100);
};
})();
//ipad safari
if(/iPad/.test(navigator.platform) && /Safari/i.test(navigator.userAgent)){
window.addEventListener("resize", setViewportHeight, false);
window.addEventListener("scroll", setViewportHeight, false);
window.addEventListener("orientationchange", setViewportHeight, false);
setViewportHeight();
}
})();
