не работает веб-заставка iPhone - PullRequest
8 голосов
/ 29 октября 2009

В веб-приложениях iPhone вы, вероятно, можете определить собственный экран-заставку, который будет отображаться во время загрузки сайта (при загрузке сайта с сохраненного значка закладки на домашней странице). Смысл в том, чтобы опыт запуска веб-приложения выглядел намного больше, как настоящее приложение для iphone.

Я считаю, что синтаксис такой:

<link rel="apple-touch-startup-image" href="/splash.png" /> (размещено в разделе <head> страницы).

Где splash.png - это вертикально ориентированное изображение 320x460.

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

Ответы [ 7 ]

8 голосов
/ 05 сентября 2010

Убедитесь, что это 320x460 пикселей.

Вы уже сказали это, но это было решением для меня.

6 голосов
/ 07 октября 2011

Вы можете установить только один экран-заставку, иначе произойдет сбой. Чтобы выбрать заставку ipad или iphone, вам нужно немного javascript.

Экранная заставка ipad, которая может использоваться для собственных приложений, не работает для веб-приложений. Ни один не заставка сетчатки для iphone4. Вы можете выбрать только всплеск размеров ipad или iphone. Установка атрибута размера в элементе ссылки, кажется, работает на iPad. Но наличие более одного элемента ссылки на заставку заставляет iphone терпеть неудачу.

Размеры заставки должны быть точными. 320x460 для iphone / ipod и 1024x748 для ipad. Если вам нужен пейзажный слэш-экран, вам нужно будет повернуть его в фотошопе, так как во время перезапуска приложения нет контроля.

Для тестирования лучше всего сначала попробовать отключить кеш приложения и уменьшить пропускную способность с помощью прокси-сервера charles или чего-то подобного.

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

<!-- hide safari chrome -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- iphone start up screens -->
<script type="application/javascript">
    var appl = document.createElement("link");
    appl.setAttribute('rel', 'apple-touch-startup-image');
    if(screen.width < 321 && window.devicePixelRatio == 1) {
      appl.setAttribute('href', 'img/icons/launch320x460.png'); //iphone 3Gs or below
    } else if (screen.width < 321 && window.devicePixelRatio == 2) { 
      //setting @2x or a 640x920 image fails, just use the iphone splash screen
    } else if (screen.width < 769 && Math.abs(window.orientation) != 90) {
      appl.setAttribute('href', 'img/icons/launch1024x748.png'); //ipad 2 or below (portait)
    } else if (screen.width < 769 && Math.abs(window.orientation) == 90) { 
      //landscape fails as well, use standard ipad screen
    }
    document.getElementsByTagName("head")[0].appendChild(appl);
</script>

<!-- iphone springboard icons -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/icons/icon57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/icon114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/icons/icon72x72.png" />
3 голосов
/ 30 октября 2009

У Apple нет особых документов по этой теме (см. этот URL ).

Несколько вещей на заметку:

  • В предоставленном вами фрагменте кода предполагается, что ваше изображение живет по адресу http://yourdomain.com/splash.png
  • Это работает только для iPhone OS 3.0 и более поздних версий
  • Изображение должно быть PNG
  • Изображение отображается только до готовности DOM страницы

Вы также можете использовать следующий код для явной установки значка веб-приложения:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
1 голос
/ 07 июля 2011

iOS 4 не показывает заставку, если вверху есть панель уведомлений - например, при использовании персональной точки доступа (модема).

1 голос
/ 08 ноября 2010

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

0 голосов
/ 09 января 2012

Вы правы, этот код должен быть в разделе, и изображение должно быть 320x460 пикселей, причина, по которой оно не работает, это то, что изображение ДОЛЖНО быть небольшим файлом размером 20 КБ или 25 КБ или меньше. У меня была такая же проблема, но когда я уменьшаю файл, который начинает работать.

ура

0 голосов
/ 07 января 2012

Каждый раз, когда я сталкиваюсь с этой проблемой, она почти всегда вызывается вызовом нескольких заставок для одной и той же страницы или тем, что размер экрана не равен 320х460 пикселей (точно). Это должно сделать трюк:

<link rel="apple-touch-startup-image" href="/splash-iphone.jpg" />

Но прежде чем вызывать заставку, вы должны также включить эти три строки кода:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...