IOS 7 - css - высота html - 100% = 692px

У меня странная ошибка в ландшафтном режиме iPad iOS7.IOS 7 - css - высота html - 100% = 692px

Что я смог исследовать, так это то, что в 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

спасибо за любую помощь.

источник

2013-09-17 Pedro Garcia Mota

жаль, что это было написано правильно, конечно, и нет поля или отступы –

Вот хороший работник, который на самом деле работает для меня: HTTP: // StackOverflow.com/a/19449123/795563 – agudulin

На боковой ноте: эта ошибка, по-видимому, исправлена на iOS8. Обходные пути должны ориентироваться только на iOS7. –

Я считаю, что это ошибка в iOS 7 - если вы поворачиваете его в портретный режим, он устанавливает оба значения (innerHeight/outerHeight) на одно и то же значение. Если это не ошибка, тогда в режиме портрета есть один, потому что поведение несовместимо.

Вы можете обнаружить IOS 7/мобильный Safari и использовать window.innerHeight если IOS 7.

источник

2013-09-19 14:48:09 ururk

Ww также надеются, что это всего лишь ошибка, мы выбираем прямо сейчас для определенного стиля для iOS7, но мы надеялись, что это не будет окончательным решением, спасибо за ответ в любом случае –

Вы нашли что-то связанное с ним? У меня такая же проблема в ландшафтном режиме, она разрушает каждый медиа-запрос (для ландшафта ios7 на ipad/ipad mini/ipod last gen) Я бегу, и я тоже заметил его для эмулятора. Какие медиа-запросы вы используете (если хотите)? – Panagiotis

@Panagiotis, вы можете попробовать что-то вроде этого: 1. set $ (window) .height (672); 2. call window.scrollTo (0, 0); каждый раз, когда пользователь пытается прокрутить всю страницу (с некоторым алгоритмом блокировки) или попытаться отменить событие прокрутки. – agudulin

я объединить ответы. Спасибо всем!

Вы можете сделать что-то вроде этого:

if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) { 
    $('#yourDivID').height(window.innerHeight); 
    window.scrollTo(0, 0); 
}

window.scrollTo решает проблему бара перекрытия ландшафта при вращении.

Cheers!

источник

2013-11-21 18:17:39 agfa555

Абсолютно работаю для меня –

Ницца это сработало спасибо –

Я использовал это решение 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)"; 
}

источник

2013-11-28 16:39:30 czuendorf

Спасибо за это! Я думал, что сегодня схожу с ума, когда тестирую пользовательский интерфейс, который я создаю. –

Благодарим вас за это решение, по крайней мере, полезно. Но как насчет того, хочу ли я запускать эту функцию только тогда, когда отображается мягкая клавиатура? Есть идеи? Большое спасибо! – eMarine

Вы можете только обнаружить, что отображается мягкая клавиатура, если вы используете Apache Cordova/Phonegap и разрешаете изменение размера видового экрана при появлении мягкой клавиатуры. – czuendorf

я воспроизвожу ту же проблему в прошивке 8.

Вот мое решение.

Я слушал размер, свитка, orientationChange события, чтобы обеспечить при изменении пользователя триггера размера экрана, будет вызывать функцию сброса высоты.

Я написал 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(); 
    } 
})();

источник

2015-01-21 21:31:57

IOS 7 - css - высота html - 100% = 692px

ответ

Смежные вопросы