iOS 7 iPad Safari Пейзаж innerHeight / внешний дизайн макета

Мы видим проблемы с веб-приложением, которое имеет высоту 100% на Safari в iOS 7. Кажется, что window.innerHeight (672px) не соответствует window.outerHeight (692px), но только в ландшафтном режиме. Что в итоге происходит, так это то, что в приложении со 100% -ной высотой на теле вы получаете 20px дополнительного пространства. Это означает, что когда пользователь просматривает наше приложение, навигационные элементы вытягиваются за Chrome браузера. Это также означает, что любые абсолютно позиционированные элементы, находящиеся в нижней части экрана, заканчиваются на 20 пикселей.

Этот вопрос также был описан в этом вопросе здесь: IOS 7 – css – высота html – 100% = 692px

И можно увидеть в этом двусмысленном скриншоте: iOS 7 Safari externalHeight issue

То, что мы пытаемся сделать, это взломать это, так что пока Apple не исправляет ошибку, нам не нужно беспокоиться об этом.

Один из способов сделать это – абсолютно позиционировать тело только в iOS 7, но это в значительной степени ставит дополнительные 20 пикселей в верхней части страницы, а не снизу:

body { position: absolute; bottom: 0; height: 672px !important; } 

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

В моем случае решение заключалось в том, чтобы изменить позиционирование на фиксированное:

 @media (orientation:landscape) { html.ipad.ios7 > body { position: fixed; bottom: 0; width:100%; height: 672px !important; } } 

Я также использовал скрипт для обнаружения iPad с iOS 7:

 if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) { $('html').addClass('ipad ios7'); } 

Простое, чистое решение только для CSS:

 html { height: 100%; position: fixed; width: 100%; } 

iOS 7, похоже, правильно устанавливает высоту. Также нет необходимости изменять размер событий javascript и т. Д. Поскольку вы работаете с полноразмерным приложением, на самом деле не имеет значения, всегда ли оно фиксировано.

Ответ Самуэля, как также сказал Терри Торсен, отлично работает, но не удается, если веб-страница была добавлена ​​в дом iOS.

Более интуитивно понятным window.navigator.standalone будет проверка на window.navigator.standalone var.

 if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) { $('html').addClass('ipad ios7'); } 

Таким образом, это применимо только при открытии внутри Safari, а не при запуске из дома.

Ответ Самуэля является лучшим, хотя он ломается, если пользователь добавляет страницу на свой домашний экран (на страницах главного экрана не отображается ошибка). Проверьте значение innerHeight перед добавлением classа следующим образом:

 if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i)) { if(window.innerHeight==672){ $('html').addClass('ipad ios7'); } } 

Обратите внимание, что ошибка также не отображается в webview.

Я использовал это решение 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); } }.bind(this); window.addEventListener("scroll", fixViewportHeight, false); window.addEventListener("orientationchange", fixViewportHeight, false); fixViewportHeight(); document.body.style.webkitTransform = "translate3d(0,0,0)"; } 

Вариант подхода Сэмюэля, но с положением: -webkit-sticky, установленный на html, работал для меня лучше всего.

 @media (orientation:landscape) { html.ipad.ios7 { position: -webkit-sticky; top: 0; width: 100%; height: 672px !important; } } 

Обратите внимание: «top: 0», а не «bottom: 0», а целевой элемент – «html», а не «body»

В основном есть две ошибки – высота windows в ландшафтном режиме и положение прокрутки, когда пользователь возвращается к нему из портретного режима. Мы решили это так:

высота windows контролируется:

 // window.innerHeight is not supported by IE var winH = window.innerHeight ? window.innerHeight : $(window).height(); // set the hight of you app $('#yourAppID').css('height', winH); // scroll to top window.scrollTo(0,0); 

теперь вышеупомянутое может быть введено в функцию и привязываться к событиям изменения размера и / или изменения ориентации. вот он … см. пример:

http://www.ajax-zoom.com/examples/example22.php

Для устранения этой ошибки необходим JavaScript. window.innerHeight имеет правильную высоту. Вот простейшее решение, о котором я могу думать:

 $(function() { function fixHeightOnIOS7() { var fixedHeight = Math.min( $(window).height(), // This is smaller on Desktop window.innerHeight || Infinity // This is smaller on iOS7 ); $('body').height(fixedHeight); } $(window).on('resize orientationchange', fixHeightOnIOS7); fixHeightOnIOS7(); }); 

Вам также необходимо установить position: fixed на .

Вот полный рабочий пример:

       iOS7 height bug fix      

Lorem ipsum dolor sit amet.

Что касается принятого ответа, мне также повезло со следующим правилом:

 html.ipad.ios7 { position: fixed; width: 100%; height: 100%; } 

Это имеет дополнительное преимущество в том, что он, кажется, останавливает элемент html, прокручивая «под» фиксированный элемент тела.

Если я использую это:

 if (navigator.userAgent.match(/iPad;.*CPU.*OS 7_\d/i) && !window.navigator.standalone) { $('html').addClass('ipad ios7'); } 

Мой Safari на Mac показывает те же classы html … SO его работает некорректно.

Я попытался объединить несколько вещей – это сработало для меня, поэтому я могу управлять им в браузере и без просмотра браузера.

JQuery

 if (navigator.userAgent.match(/iPad/i) && (window.orientation) ){ $('html').addClass('ipad '); if (window.innerHeight != window.outerHeight ){ $('html').addClass('browser landscape'); } else{ $('html').addClass('browser portrait'); } } 

CSS

 @media (orientation:landscape) { html.ipad.browser > body { position: fixed; height: 671px !important; } } 

///// С этим вы более гибкие или другие ОС и браузеры

Я столкнулся с этой страницей по той же проблеме. Здесь много полезных ответов, а другие нет (для меня).

Тем не менее, я нашел решение, которое работает в моем случае, и работает полностью независимо от того, какая версия ОС и какая ошибка сейчас или в прошлом или в будущем.

Объяснение: Разработка веб-приложения (без встроенного приложения) с несколькими модулями фиксированного размера в полноэкранном режиме, с именем classа “module”

 .module {position:absolute; top:0; right:0; bottom:0; left:0;} 

который содержит нижний колонтитул с именем classа “footer”

 .module > .footer {position:absolute; right:0; bottom:0; left:0; height:90px;} 

Nevermind, если я установил высоту нижнего колонтитула позже на другую высоту или даже его высоту установил по содержанию, я могу использовать этот следующий код для исправления:

 function res_mod(){ $('.module').css('bottom', 0); // <-- need to be reset before calculation var h = $('.module > .footer').height(); var w = window.innerHeight; var o = $('.module > .footer').offset(); var d = Math.floor(( w - o.top - h )*( -1 )); $('.module').css('bottom',d+'px'); // <--- this makes the correction } $(window).on('resize orientationchange', res_mod); $(document).ready(function(){ res_mod(); }); 

Благодаря навыкам Matteo Spinelli я все еще могу использовать iScroll без проблем, так как к счастью, его события с изменениями увольняются. Если нет, необходимо будет снова восстановить iScroll-init после коррекции.

Надеюсь, это поможет кому-то

Принимаемый ответ не справляется, когда отображается панель избранного. Здесь улучшено уловить все исправление:

 @media (orientation:landscape) { html.ipad.ios7 > body { position: fixed; height: calc(100vh - 20px); width:100%; } } 

что, если вы попробуете

 html{ bottom: 0;padding:0;margin:0}body { position: absolute; bottom: 0; height: 672px !important; } 
  • Как отключить ссылку на номер телефона в Mobile Safari?
  • HTML5 Сафари в прямом эфире против нет
  • Как заставить WebKit перерисовывать / перерисовывать для распространения изменений стиля?
  • : not () не ведет себя так же между Safari и Chrome / Firefox
  • Как проверить AppleScript, если приложение запущено, без его запуска - с помощью утилиты osascript
  • Как заставить повторную визуализацию после преобразования WebKit 3D в Safari
  • Похоже, что Firefox и Safari на Mac не могут показать веб-страницу в полноэкранном режиме?
  • Safari / Chrome (Webkit) - Не удается скрыть вертикальную полосу прокрутки iframe
  • Содержимое WebKit CSS Unicode?
  • Множественный выбор в Safari iOS 7
  • Запретить скрытие адресной строки в мобильных браузерах
  • Давайте будем гением компьютера.