Блог

Главная - Вопросы по программированию - Задержка экрана запуска веб-приложения Iphone

Задержка экрана запуска веб-приложения Iphone

#iphone #web-applications #splash-screen

#iPhone #веб-приложения #заставка

Вопрос:

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

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

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

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

Ответ №1:

Попробуйте изменить <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;" /> so width=device-width и использовать запятые ( , ) вместо точек с запятой ( ; ), кроме как в конце строки.

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

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

Смотрите Конфигурацию веб-приложения iOS — 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() amp;amp; iOSNewerThan(5)) { 
      var highResSplash = '<link rel="apple-touch-startup-image" href="/images/splash-iphone4.png" />'; 
      $('head').append(highResSplash); 
  }
});

Комментарии:

1. Да, у меня есть это в разделе head <link rel=»apple-touch-startup-image» href=»разное/startup.png»>

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

3. Попробуйте изменить свой <link rel="apple-touch-startup-image" href="misc/startup.png" media="screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)" /> на просто: <link rel="apple-touch-startup-image" href="misc/startup.png" media="screen and (max-device-width: 320px)" /> и посмотрите, изменится ли это что-нибудь?

4. Другая идея заключается в том, чтобы изменить <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;" /> , чтобы ширина = device-width и использовать запятые (,) вместо точек с запятой (;), за исключением конца строки.

5. прекрасно, это сработало отлично. Спасибо за всю вашу помощь, друзья!