IOS 7- css - html高度- 100% = 692px
IOS 7- css - html高度- 100% = 692px
提问于 2013-09-18 00:58:13
我在iPad iOS7横向模式上有一个奇怪的bug。
我能够调查的是，在iOS7中，window.outerHeight是692px，window.innerHeight是672px；而在以前的版本中，这两个值都是672px。
即使我的<html>和<body>标签有100%的高度，似乎还有滚动的空间，奇怪的是，这个问题只在landscpae上出现
你可以通过访问t.cincodias.com看到我在说什么，例如，在iOS 7 iPad中，页脚栏(有时是页眉)将被剪切。但在以前的iOS版本中，内容可以在全屏显示。
即使我将两个标签的高度都设置为height: 672px !important和position:absolute; bottom: 0;，您仍然可以通过触摸iframe来垂直滚动内容(广告是iframe)。
我正在运行iOS7的发布候选版本
谢谢你的帮助。
回答 3
Stack Overflow用户
发布于 2013-11-29 00:39:30
我使用这个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)";
}Stack Overflow用户
发布于 2013-09-19 22:48:10
我认为这是iOS 7中的一个错误-如果你将它旋转到纵向模式，它会将两者(内部高度/外部高度)设置为相同的值。如果这不是一个bug，那么肖像模式就有一个bug，因为行为不一致。
你可以检测到iOS 7/mobile Safari，如果是iOS 7，你可以使用window.innerHeight。
Stack Overflow用户
发布于 2013-11-22 02:17:39
我会把答案结合起来。谢谢大家！
你可以这样做：
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
$('#yourDivID').height(window.innerHeight);
window.scrollTo(0, 0);
}window.scrollTo解决了旋转时横条重叠的问题。
干杯!
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18855642
复制相关文章
相似问题