Как скрыть панель масштабирования страницы на iPad / iPhone с iOS 13 - PullRequest
Новая
       21

Как скрыть панель масштабирования страницы на iPad / iPhone с iOS 13

3 голосов
/ 25 октября 2019

У нас есть веб-приложение, которое мы добавляем на домашний экран из Safari. Он построен с Ionic / Angular. Теперь, когда мы переключаемся на другую страницу в приложении, появляется белая полоска вверху, где вы можете изменить масштаб страницы и получить доступ к другим настройкам (переключение между мобильным и настольным веб-сайтом и доступ к дополнительным настройкам веб-сайта). Он покрывает часть веб-приложения и исчезает, когда вы нажимаете «Готово» на левой стороне - пока вы не откроете другую страницу, он снова появится. Такое же поведение на iPad и iPhone, iOS 13.1 и 13.2 (бета).

Есть ли способ предотвратить появление этого?

iPad top bar

Веб-приложение установило следующие метатеги, среди прочего: 

    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <meta name="apple-mobile-web-app-title" content="MyWebApp">
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-mobile-web-app-status-bar-style" content="black" />

Ответы [ 2 ]

0 голосов
/ 08 ноября 2019

У меня та же проблема ... Мне удалось найти решение только для удаления слова "Готово" с левой стороны панели инструментов.

измените любые перенаправления с location.href='yourUrl' на location.replace('yourUrl'), и это должно удалить слово "Готово"

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

Это фактически остановило перенаправление из веб-приложения, что является хорошим первым шагом. Я буду продолжать искать способ удалить эту строку URL ... Надеюсь, это поможет

0 голосов
/ 27 октября 2019

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

Однако, если новая страница включенатот же домен, вы можете просто настроить область вашего приложения в манифесте веб-приложения. Если у вас еще нет манифеста, он выглядит следующим образом: 

{
  "name": "My web app",
  "short_name": "Web App",
  "description": "This is a web app",
  "lang": "en-GB",
  "start_url": "/app/home.html",
  "scope": "/app/",
  "display": "standalone"
}

Этот элемент области действия означает, что все файлы и страницы в каталоге app будут работать в вашем PWA как обычный нативныйприложение (т.е. нет всплывающих окон). Все файлы вне этой области будут открываться в обычном веб-браузере с кнопкой возврата к вашему PWA. Это не идеально, но дает гораздо лучший UX, чем раньше. Вы можете прочитать больше о настройке области действия здесь .

Я бы порекомендовал использовать генератор manifest.json, такой как , этот , просто потому, что они делают этот процесс намного проще,В этом примере вы найдете настройку области действия в поле «start url».

...