Iphone Webapp Задержка запуска экрана - PullRequest
Новая
       8

Iphone Webapp Задержка запуска экрана

2 голосов
/ 11 октября 2011

Я сделал простое веб-приложение для iPhone, установил заставку, значок и все такое. Вот ссылка на него.

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

Я добавил на свой рабочий стол другие веб-приложения для iPhone, такие как JQtouch , открыл их, и сразу же появился экран запуска.

Мне интересно, если я что-то не так в HTML-код ???

1 Ответ

2 голосов
/ 11 октября 2011

Попробуйте изменить <meta name="viewport" content="width=300px; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> на <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />, чтобы width=device-width и использовали запятые (,) вместо точек с запятой (;), кроме конца строки.

У вас есть это в вашем <head>: 

<link rel="apple-touch-startup-image" href="myImage.jpg">

См. Конфигурация iOS Web App - mobile-meta-links.html для точных характеристик: 

<!-- startup image for web apps - iPad - landscape (748x1024) 
     Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" href="img/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<!-- startup image for web apps - iPad - portrait (768x1004) -->
<link rel="apple-touch-startup-image" href="img/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

<!-- startup image for web apps (320x460) -->
<link rel="apple-touch-startup-image" href="img/iphone.png" media="screen and (max-device-width: 320px)" />

Также прочитайте, что образ запуска будет отображаться только при использовании HTML5-doctype <!DOCTYPE html>

С Значки и заставки для веб-приложений на iOS - Retina дисплеи также приветствуются :

Для вставки заставки высокого разрешения в <head>, но только для устройств iOS с дисплеем Retina под управлением iOS5 или более поздней версии: 

function hasRetinaDisplay() {
  return (window.devicePixelRatio >= 2);
}
function isAppleDevice() {
  return (/iphone|ipod|ipad/gi).test(navigator.platform);
}
function iOSNewerThan(majorVersion) {
  if(isAppleDevice()) {
      // Check the version
      var pattern = /iPhone OS (.*) like Mac/;
      var result  = navigator.userAgent.match(pattern); // Returns "iPhone OS X_Y like Mac, X_Y"
      var version = result[1].split(''); // Returns X, Y
      var release = version[0];
      return (release >= majorVersion);
  }
  return false;
}

// When we're ready to go...
$(document).ready(function() { 
  if(hasRetinaDisplay() && iOSNewerThan(5)) { 
      var highResSplash = '<link rel="apple-touch-startup-image" href="/images/splash-iphone4.png" />'; 
      $('head').append(highResSplash); 
  }
});
...