скрыть адресную строку iPhone с высотой 100% - PullRequest
Новая
       23

скрыть адресную строку iPhone с высотой 100%

10 голосов
/ 06 марта 2011

Много сообщений на эту тему, но не совсем для моей ситуации. Моя страница имеет гибкие размеры, настроенные на 100% ширины и 100% высоты, поэтому обычная функция прокрутки при загрузке не работает. Есть мысли или другие решения?

Спасибо!

CSS: 

* {
    margin:0;
    padding:0;
}
html, body {
    width:100%;
    height:100%;
    min-width:960px;
    overflow:hidden;
}

Javascript: 

    /mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function () {
  window.scrollTo(0, 1);
    }, 1000);​

Ответы [ 2 ]

5 голосов
/ 27 февраля 2012

Это решение от Нейта Смита помогло мне: Как скрыть адресную строку в полноэкранном веб-приложении для Iphone или Android .

Вот важный бит: 

var page   = document.getElementById('page'),
    ua     = navigator.userAgent,
    iphone = ~ua.indexOf('iPhone') || ~ua.indexOf('iPod');

var setupScroll = window.onload = function() {
  // Start out by adding the height of the location bar to the width, so that
  // we can scroll past it
  if (ios) {
    // iOS reliably returns the innerWindow size for documentElement.clientHeight
    // but window.innerHeight is sometimes the wrong value after rotating
    // the orientation
    var height = document.documentElement.clientHeight;
    // Only add extra padding to the height on iphone / ipod, since the ipad
    // browser doesn't scroll off the location bar.
    if (iphone && !fullscreen) height += 60;
    page.style.height = height + 'px';
  }
  // Scroll after a timeout, since iOS will scroll to the top of the page
  // after it fires the onload event
  setTimeout(scrollTo, 0, 0, 1);
};

Для получения более подробной информации, ознакомьтесь с его сообщением в блоге или Gist .

3 голосов
/ 16 сентября 2011

Я тоже с этим боролся.Сначала я попробовал CSS-класс (.stretch), определяющий 200% высоты и видимый переполнение, затем переключал это в HTML с помощью скрипта до и после scrollTo.Это не работает, потому что вычисленная высота 100% относится к доступным измерениям области просмотра минус весь браузер Chrome (восстановление строки состояния обратно на место).

В конце концов мне пришлось запросить конкретные стили для динамического применения черезDOM API.Чтобы добавить к вашему дополнительному фрагменту: 

var CSS = document.documentElement.style;

/mobile/i.test(navigator.userAgent) && !pageYOffset && !location.hash && setTimeout(function () {
  CSS.height = '200%';
  CSS.overflow = 'visible';

  window.scrollTo(0, 1);

  CSS.height = window.innerHeight + 'px';
  CSS.overflow = 'hidden';
}, 1000);​

Однако я бы порекомендовал расширить метод Скотта Джела, который учитывает незначительные различия между прокруткой Safari в Android / iOS:

https://gist.github.com/scottjehl/1183357

...