IOS 7 – CSS – HTML高度 – 100％= 692px
我有一个奇怪的错误在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; position:absolute; bottom: 0; ，您仍然可以通过触摸iframe来垂直滚动内容（广告是iframe）。
我正在运行iOS7的候选版本
谢谢你的帮助。
我相信这是iOS 7中的一个错误 – 如果将其旋转到纵向模式，则会将（innerHeight / outerHeight）设置为相同的值。 如果它不是一个错误，那么肖像模式有一个，因为行为是不一致的。
你可以检测iOS 7 /移动Safari，并使用window.innerHeight如果iOS 7。
我使用这个JavaScript解决scheme来解决这个问题：
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)"; }
我将结合答案。 谢谢大家！
你可以做这样的事情：
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) { $('#yourDivID').height(window.innerHeight); window.scrollTo(0, 0); }
window.scrollTo解决了旋转时横向条纹重叠的问题。
干杯!
我在iOS 8中重现了同样的问题。
这是我的解决scheme。
我听取了resize ， 滚动 ， orientationChange事件，以确保当用户触发屏幕大小变化时，将调用复位高度函数。
我写了一个防止多次呼叫。
它在一个封闭的 ， 没有依赖 （没有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(); } })();
