Question

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

我遇到的问题是，当我将webapp保存到主屏幕时，白屏（或者我在Safari上打开的页面的屏幕截图）会在启动屏幕之前显示几秒钟。< / p>

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

我想知道我的html代码是否有问题???

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

Iphone Webapp启动屏幕延迟

1 个答案: