Как скрыть адресную строку на iPhone?

Question

Как скрыть адресную строку на iPhone?

Я пробовал два разных метода:

• Прокрутка вниз на один пиксель с помощью JavaScript при загрузке страницы

• И следующие метатеги:

  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><meta name="apple-mobile-web-app-capable" content="yes" />
  

Также это:

<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

Я полностью сбит с толку.

PS: О, я забыл действительно важную вещь: сама веб-страница не переполняет окно браузера. Вероятно, это причина того, что трюк с прокруткой в ​​1 пиксель не работает.

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

Answer 1

Я просто ударил это сам. Если адресная строка не скрывается, причиной может быть просто то, что страница недостаточно длинна для прокрутки.

Когда

window.scrollTo(0,1)

называется страницей ДОЛЖЕН быть длиннее окна, чтобы происходило событие прокрутки.

Только в случае прокрутки мобильное сафари будет скрывать адресную строку.

Answer 2

Если что-то не изменилось в последних версиях iOS, надежно работает прокрутка вниз, у меня не было проблем с этой версией :

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

Я не заботился о какой-либо другой мобильной платформе для этой конкретной страницы, хотя она перенаправляла на основе агента ... вы можете изменить регулярное выражение для проверки iPhone специально, например, заменить /mobile/ на /iPhone/.

Answer 3

ОБНОВЛЕНИЕ: Apple удалено поддержка minimal-ui в iOS 8, так что это уже не полезный ответ: (

---

Для новых гуглеров, изучающих это: Начиная с iOS 7.1 появился новый режим minimal-ui, который работает на мобильном Safari:

Это включается установкой свойства minimal-ui в области просмотра:

<meta name="viewport" content="minimal-ui">

Вы также можете использовать его вместе с другими свойствами, такими как:

<meta name="viewport" content="width=device-width, minimal-ui">

Следует отметить, что минимальной длины контента не требуется, как при взломе scrollTo. Там отличный обзор этого нового режима здесь . (Вот откуда взято изображение выше.) Он также перечисляет некоторые недостатки.

Единственная официальная документация, которую я мог найти по этому вопросу, - это заметка в Замечания к выпуску iOS 7.1 от Apple :

Для ключа метатега области просмотра добавлено свойство minimal-ui, позволяющее минимизировать верхнюю и нижнюю панели iPhone при загрузке страницы. В то время как на странице используется minimal-ui, нажатие на верхнюю панель возвращает панель обратно. Повторное нажатие на содержание снова отклоняет их.

Например, используйте <meta name="viewport" content="width=1024, minimal-ui”>.

Конечно, поскольку это работает только в iOS 7.1 и выше , его полезность может быть ограничена.

Answer 4

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

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

Answer 5

Я также искал это полноэкранное веб-приложение и нашел это.

http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/

1.В основном вам нужно добавить в заголовок следующее:

<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />

//App name
<meta name="apple-mobile-web-app-title" content="App name" />

<meta name="apple-mobile-web-app-capable" content="yes">

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

//APP ICONS 
<link rel="apple-touch-icon" href="/img/icon.png">

<link rel="apple-touch-icon" sizes="76x76" href="/img/icon.png">

<link rel="apple-touch-icon" sizes="120x120" href="/img/icon.png">

<link rel="apple-touch-icon" sizes="152x152" href="/img/icon.png">

Открыть сайт в Safari Нажмите на значок «Открыть с помощью» (стрелка вверх и поле под ним) рядом с кнопкой обновления в строке URL Выберите «Добавить на главную экран»" зайдите на домашний экран и откройте" Имя приложения " Вуаля!веб-сайт без адресной строки или кнопок навигации!

Answer 6

<meta name="apple-mobile-web-app-capable" content="yes" />

Настройка веб-приложений для iPhone

Answer 7

Вы можете запустить функцию, когда содержимое сайта готово, вместо использования тайм-аута

addEventListener("load", function() {
    window.scrollTo(1, 0);
}, false);

Answer 8

Попробуйте:

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

Если вы используете jQuery, поставьте его в конце $(document).ready();. Тайм-аут позволяет браузеру определить высоту страницы ...

Answer 9

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

У меня было это в моем CSS

html{position: relative; height: 100%; overflow: hidden;}

Этот CSS применяет исправление только к одной из моих страниц, поэтому я ограничил его условием для этой страницы, и теперь адресная строка работает корректно на всех других страницах.

Answer 10

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

Вот некоторый код, который будет скрывать URL-адрес при загрузке, изменении ориентации и сенсорном пуске (сенсорный пуск следует использовать только в том случае, если у вас есть постоянный скрытый URL-адрес, который представляет собой целую другую банку червей - если вы удалите эту часть сценария).

if( !window.location.hash && window.addEventListener ){
    window.addEventListener("load", function() {
        setTimeout(function(){
            window.scrollTo(0, 0);
        }, 0);
    });
    window.addEventListener( "orientationchange",function() {
        setTimeout(function(){
            window.scrollTo(0, 0);
        }, 0);
    });
    window.addEventListener( "touchstart",function() {
         setTimeout(function(){
             window.scrollTo(0, 0);
         }, 0);
     });
}