Ped*_*ota 50 html css mobile-safari ios7
我在iPad iOS7横向模式上有一个奇怪的错误.
我能够调查的是在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的候选版本
谢谢你的帮助.
czu*_*orf 16
我使用这个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)";
}
小智 15
我相信这是iOS 7中的一个错误 - 如果你将它旋转到纵向模式,它会将(innerHeight/outerHeight)设置为相同的值.如果它不是错误,那么纵向模式有一个,因为行为不一致.
您可以检测iOS 7 /移动版Safari并使用window.innerHeight(如果是iOS 7).
我会结合答案.谢谢大家!
你可以这样做:
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
$('#yourDivID').height(window.innerHeight);
window.scrollTo(0, 0);
}
window.scrollTo解决旋转时条形图在景观中重叠的问题.
干杯!