У меня странная ошибка в ландшафтном режиме iPad iOS7.
Что я смог исследовать, так это то, что в iOS7 window.outerHeight - 692px и window.innerHeight 672px; в то время как в предыдущих версиях оба значения равны 672px.
Несмотря на то, что теги <html> и <body> имеют высоту 100%, кажется, что есть пространство для прокрутки, и странно, что эта проблема возникает только при использовании ландшафтного ландшафта
Вы можете видеть, о чем я говорю, посетив t.cincodias.com, например, в iOS 7 iPad нижняя колонка (или заголовок иногда) будет срезана. Но в предыдущих версиях iOS содержимое отображалось в полноэкранном режиме.
Даже когда я устанавливаю высоту обоих тегов на height: 672px !important и position:absolute; bottom: 0;, вы все равно можете прокручивать содержимое по вертикали, прикоснувшись к iframe (объявления являются iframes).
Я запускаю версию-кандидат на выпуск iOS7
спасибо за любую помощь.
Я считаю, что это ошибка в iOS 7 - если вы поворачиваете ее в портретный режим, она устанавливает оба значения (innerHeight/outerHeight) на одно и то же значение. Если это не ошибка, тогда режим портрета имеет один, потому что поведение несовместимо.
Вы можете обнаружить iOS 7/mobile Safari и использовать window.innerHeight, если iOS 7.
Я использовал это решение 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)";
}
Я объединю ответы. Спасибо всем!
Вы можете сделать что-то вроде этого:
if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) {
$('#yourDivID').height(window.innerHeight);
window.scrollTo(0, 0);
}
Window.scrollTo решает проблему перекрытия полосы в ландшафте при вращении.
Ура!
Я воспроизвожу ту же проблему в iOS 8.
Вот мое решение.
Я прослушал событие изменить размер, прокрутка, orientationChange, чтобы гарантировать, что при изменении размера экрана запуска пользователя вызовет функцию reset height.
Я написал debounce, чтобы предотвратить множественный вызов.
И это в закрытии и не зависимо (без 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();
}
})();