Запретить веб-приложению iPad отображать адресную строку Safari

ProgramBox

Запретить веб-приложению iPad отображать адресную строку Safari

Post author:admin
Запись опубликована:20 апреля, 2023
Post category:Вопросы по программированию

#ipad #safari #jquery-mobile #web-applications #address-bar

#iPad #safari #jquery-мобильный #веб-приложения #адресная строка

Вопрос:

У меня есть веб-приложение, запущенное в Safari на iPad. Я запускаю приложение с домашней страницы iPad. Я хочу, чтобы приложение запускалось в полноэкранном режиме и продолжало работать в полноэкранном режиме (т. Е. не отображало адресную строку Safari). Поэтому я добавил следующие мета-теги на главную страницу сайта:

 <meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="viewport" content="width=device-width">

Я запускаю приложение с домашней страницы iPad, и оно отлично запускается в полноэкранном режиме (без отображения адресной строки Safari), но когда я нажимаю a на другую страницу сайта (с теми же мета-тегами, унаследованными с той же главной страницы сайта), адресная строка внезапно появляется в поле зрения (и остается в поле зрения). Ссылка выглядит следующим образом (я использую jQueryMobile):

 <a href="/Home" data-ajax="false">Home</a>

Как я могу заставить веб-приложение оставаться похожим на «родное приложение», скрыв адресную строку при переходе между внутренними страницами?

Ответ №1:

Может показаться, что мобильное Safari «изначально» не поддерживает полноэкранный режим, если вы используете внешние ссылки. Как только вы используете привязку html, она выходит из полноэкранного режима. Window.scrollTo может быть обходным решением, которое сработает для некоторых людей, но я также хочу избежать того, что пользовательский интерфейс переворачивается при переходе в не полноэкранный режим.

Ответ заключается в использовании window.location.assign(). Это позволяет сохранить полноэкранное приложение в «родном» полноэкранном режиме. Вам просто нужно реорганизовать ваши теги в javascript window.вызовы location.assign (url) — которые затем сохраняют объект в полноэкранном режиме.

1. Да, но это отвратительно. Настройка device-height и некоторых других mediaqueries также могут превратить приложение в полноэкранный режим, не отключая его для других браузеров.

2. @naugtur — спасибо за комментарий. Вы хотите сказать, что я могу использовать стандартные ссылки <a href=»bla»>, и они не будут отображаться на весь экран? Если да, то какая высота устройства и другие настройки мне нужны, и позволит ли это избежать непривлекательного визуального эффекта подкачки страниц?

3. <meta name=»окно просмотра» content=»width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,user-scalable=no» > хотя это, похоже, нарушает изменение ориентации на ipod. Я не изучал эту тему.

4. @naugtur — У меня этот тег уже есть в заголовке, но в iOS 4.3.3, если вы выдаете <a href =»sample.htm «> ссылка, после чего оно переходит из полноэкранного режима. Я полагаю, что jQueryMobile также демонстрирует подобное поведение, если вы используете такие внешние ссылки. Единственное решение, которое я нашел, — это окно. location.assign(). Мне интересно, почему вы считаете это неприятным — поддерживается ли это не всеми браузерами? — спасибо за информацию.

5. Ладно, вы загнали меня в угол, беру свои слова обратно. 🙂 Я просто не видел, чтобы эта вещь использовалась раньше, и я предположил, что это не кроссбраузерный. Так что это не так уж и неприятно, но это нарушает JQM DOMcaching, что не совсем приятно.

Ответ №2:

Добавьте jQuery, и вам не придется изменять какие-либо ссылки,

 $(document).ready(function(){
    $('a').click(function(event){
        event.preventDefault();
        window.location.assign($(this).attr('href'));
    });
});

Пример ссылки:

 <a href="nextpage.html">Next page without safari</a>

Ответ №3:

возможно, это: источник

 // When ready...
window.addEventListener("load",function() {
    // Set a timeout...
    setTimeout(function(){
        // Hide the address bar!
        window.scrollTo(0, 1);
    }, 0);
});