Не удается заставить мой веб-сайт работать в полноэкранном режиме в мобильных браузерах (при сохранении на главном экране) - PullRequest
Новая
       43

Не удается заставить мой веб-сайт работать в полноэкранном режиме в мобильных браузерах (при сохранении на главном экране)

0 голосов
/ 22 апреля 2019

Я довольно новичок в javascript, и недавно создал сайт на практике.Я пытался заставить веб-сайт отображаться как полноэкранное веб-приложение в мобильных браузерах, но, похоже, ничего не работает.Я был в основном на всех соответствующих веб-сайтах и ​​ресурсах, которые я могу найти, но все еще ничего.Я начинаю думать, что это где-то глупая маленькая ошибка, которую я упустил из виду.Любая помощь от более опытных сторон будет очень признательна <3 </p>

Сайт для справки: это

Вещи, которые я пробовал:

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

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

2) создание полного файла manifest.json, связывание его с моим index.html.Инструменты разработчика Chrome не смогли обнаружить мой файл манифеста, но pwabuilder.com смог.

Я также пытался изменить / в источнике (связывая manifest.json в index.html), а также пробовал обе попытки выше вместе и по отдельности.Я прочитал, что это может быть проблема с кешем, поэтому я также попытался очистить кеш несколько раз, переустановить chrome, среди многих других бесполезных попыток.

это релевантная часть моего index.html 

<meta name="viewport" content = "width = device-width, initial-scale = 0.7,  user-scalable = no">
<link rel="manifest" href="/manifest.json">
<link rel="stylesheet" href="styles.css">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="mobile-web-app-capable" content="yes">

, когда я пытаюсь использовать подход pwa (используя manifest.json) по какой-то причине, chrome не обнаруживаетмой файл манифеста.Я обнаружил неисправности, и мой код и ссылки идентичны нескольким учебным пособиям и ссылкам, но он все еще не обнаруживает.Я все еще пробовал это на своем iphone, но он все еще открывает сафари с моего домашнего экрана.

пробовал подход мета-тега apple, но эта строка кода буквально тоже не имеет видимого различия.

Ответы [ 3 ]

0 голосов
/ 23 апреля 2019

В Chrome DevTools вы можете проверить manifest.json в пункте меню «Приложение», там есть раздел «Приложение / Манифест».

0 голосов
/ 24 апреля 2019

Решено! Проблема, казалось, заключалась в том, что у меня было слишком много всего происходящего в моем. Я просто переместил кучу HTML в раздел body, и манифест был обнаружен инструментами Chrome Dev.

0 голосов
/ 23 апреля 2019

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

Также убедитесь, что ваш манифест содержит минимальные элементы, которые можно считать подходящими для установки, если вы хотите, чтобы в Chrome для Android была кнопка добавления на главный экран (должно быть короткое имя или имя, должны содержать значки размером 192px и 512px). , start_url, display должен быть одним из: полноэкранный, автономный или minimal-ui). Дополнительную информацию можно найти на веб-сайте Google PWA Developers . 

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="manifest" href="/manifest.json"><!-- Note manifest is in the header -->
    <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Content Here</h1>
</body>
</html>
...