Iphone Web 应用程序启动屏幕延迟

发布于 2024-12-09 10:59:24 字数 375 浏览 0 评论 0 原文

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

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

狂之美人 2024-12-16 10:59:24

尝试更改到因此 width=device-width 并使用逗号 (,) 而不是分号 (;)，除非在线的末尾。

您的中是否有此内容：

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

请参阅 iOS Web 应用程序配置 - 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 时才会显示启动图像

来自 iOS Web 应用程序的图标和启动屏幕 - 视网膜也欢迎展示：

将高分辨率启动画面插入，但仅
对于配备运行 iOS5 或更高版本的视网膜显示屏的 iOS 设备：

函数 hasRetinaDisplay() {
  return (window.devicePixelRatio >= 2);
}
函数 isAppleDevice() {
  return (/iphone|ipod|ipad/gi).test(navigator.platform);
}
函数 iOSNewerThan(majorVersion) {
  如果（isAppleDevice（））{
      // 检查版本
      var pattern = /iPhone OS (.*) 就像 Mac/;
      var 结果 = navigator.userAgent.match(pattern); // 返回“iPhone OS X_Y 像 Mac，X_Y”
      var version = result[1].split(''); // 返回 X、Y
      var 版本 = 版本[0];
      return (release >= mainVersion);
  }
  返回假；
}

// 当我们准备好开始时...
$(文档).ready(函数() { 
  if(hasRetinaDisplay() && iOSNewerThan(5)) { 
      var highResSplash = ''; 
      $('head').append(highResSplash); 
  }
});

Try changing <meta name="viewport" content="width=300px; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /> to <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /> so the width=device-width and using commas (,) instead of semi-colons (;) except at the end of the line.

Do you have this in your <head>:

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

See iOS Web App Configuration - mobile-meta-links.html for exact specs:

<!-- 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)" />

Also read that the startup image will only show up if you use the HTML5-doctype
<!DOCTYPE html>

From Icons and splash screens for iOS web apps - retina displays also welcome:

To insert a high-resolution splash screen into the <head>, but only
for iOS devices with a retina display running iOS5 or later:

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

回复收藏 0 原文

~没有更多了~