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

Ответ 1

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

Когда

window.scrollTo(0,1)

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

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

Ответ 2

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

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

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

Ответ 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. Там отличный обзор этого нового режима здесь. (Вот откуда взято изображение выше.) Он также перечисляет некоторые недостатки.

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

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

For example, use <meta name="viewport" content="width=1024, minimal-ui'>.

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

Ответ 4

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

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

Ответ 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">

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

Ответ 6

Попробуйте:

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

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

Ответ 7

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

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

Ответ 8

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

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

Ответ 9

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

Вот некоторый код, который будет скрывать 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);
     });
}

Ответ 10

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

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

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

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

Ответ 11

<meta charset="utf-8"><meta name="description" content="{MF_PLUGIN_SETTING:HOME_DESCRIPTION}"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes"> 

Это используется для добавления веб-приложения ios на домашний экран без панели поиска.