Мобильный CSS высота 100% + браузер хром? - PullRequest
Новая
       11

Мобильный CSS высота 100% + браузер хром?

3 голосов
/ 14 марта 2012

Я хочу, чтобы div занимал 100% области просмотра для мобильных устройств.Сначала я просто установил его высоту и ширину на 100%.

Однако теперь я скрываю браузер Chrome со следующим JavaScript: 

setTimeout(function() { 
window.scrollTo(0, 1) }, 
100);

В результате высота составляет 100% минус высота браузера Chrome.Кроме того, JavaScript работает, прокручивая страницу вниз настолько, чтобы хром был скрыт, и это может произойти, только если страница выше, чем div, который я использую.

Как я могу обойти это?Это единственный способ использовать обнаружение устройства и добавить значение высоты браузера Chrome в пикселях для каждого устройства?Я хотел бы избежать этого, если это возможно.Спасибо

1 Ответ

5 голосов
/ 19 марта 2012

Если я не ошибаюсь, ваша проблема в основном связана с Safari iPhone.

Самое простое решение, вероятно, состоит в том, чтобы проверять изменение высоты страницы каждый заданный интервал и соответственно изменять высоту контейнера. Ни одно CSS решение не работает, по моему опыту 

var prevPageHeight = 0;

function setHeight() {
    $('#container').height( window.innerHeight );
    prevPageHeight = window.innerHeight;
}

setInterval( function() {
  if ( window.innerHeight != prevPageHeight ) {
    setHeight();
  }
}, 500);

setHeight();

Это решение также учитывает изменение ориентации. Я почти уверен, что можно легко оптимизировать привязку функции к событиям directionChange и scroll.

...