IOS 7 - css - html 高度 - 100% = 692px [英] IOS 7 - css - html height - 100% = 692px
问题描述
我在 iPad iOS7 横向模式上有一个奇怪的错误.
I have a weird bug on iPad iOS7 landscape mode.
我能够调查的是，在 iOS7 window.outerHeight 是 692px 和window.innerHeight 672px;而在之前的版本中，这两个值都是 672px.
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.
即使我的 <html> 和 <body> 标签的高度为 100%，但似乎有滚动空间，奇怪的是这个问题只出现在 landscpae
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
您可以通过访问 t.cincodias.com 了解我在说什么，例如，在 iOS 7 iPad 中，页脚栏(或有时是页眉)将被剪切.但在以前的 iOS 版本中，内容在全屏时显示良好.
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.
即使我将两个标签的高度设置为 height: 672px !important 和 position:absolute;bottom: 0; ，您仍然可以通过触摸 iframe 垂直滚动内容(广告是 iframe).
Even when i set the height of both tags to height: 672px !important and position:absolute; bottom: 0;, you can still scroll the content vertically by touching an iframe (the ads are iframes).
我正在运行 iOS7 的候选发布版本
I'm running the release candidate version of iOS7
感谢您的帮助.
推荐答案
我使用这个 JavaScript 解决方案来解决这个问题:
I used this JavaScript solution for solving that problem:
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)";
}
这篇关于IOS 7 - css - html 高度 - 100% = 692px的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
