Iphone Webapp 启动屏幕延迟答案

【问题标题】：Iphone Webapp Startup Screen DelayIphone Webapp 启动屏幕延迟
【发布时间】：2011-12-05 14:11:58
【问题描述】：

我制作了一个简单的 iPhone 网络应用程序，并设置了启动屏幕和图标等所有内容。这是给它的link。

我遇到的问题是，当我将 web 应用程序保存到主屏幕时，白屏（或者我在 Safari 上打开的页面的屏幕截图）在启动屏幕前几秒钟首先出现。

我已将其他 iPhone 网络应用程序（如 JQtouch）添加到我的主屏幕并打开它们，然后立即显示启动屏幕。

我在想是不是我的html代码有问题？？？

【问题讨论】：

标签： iphone web-applications splash-screen

【解决方案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;" />，因此width=device-width 并使用逗号（,）而不是分号（;），除非在行尾。

你的<head>有这个吗：

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

请参阅iOS Web App Configuration - 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>

来自Icons and splash screens for iOS web apps - retina displays also welcome：

要在<head> 中插入高分辨率启动画面，但仅限对于具有运行 iOS5 或更高版本的视网膜显示器的 iOS 设备：

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); 
  }
});

【讨论】：

是的，我在头部有这个
谢谢，但不，它不起作用。在启动屏幕之前，我仍然会出现白屏闪烁约 2 秒。我试图从那个 JQtouch webapp 复制代码，因为当我打开它时它工作正常，但它对我的应用程序不一样。
尝试将您的<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)" /> 看看是否有任何改变？
另一个想法是将<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;" />，因此宽度=设备宽度并使用逗号 (,) 而不是分号 (;)，除非在行尾。
可爱，效果很好。感谢您的所有帮助 chown！