iPhone网页启动画面无法正常工作

Scr*_*dog 8 iphone

在iPhone Web应用程序中,您可以定义一个自定义的初始屏幕,该屏幕将在加载网站时显示(从主页上的已保存书签图标加载网站时).关键是要使Web应用程序启动体验更像真正的iphone应用程序.

我相信语法是这样的:

<link rel="apple-touch-startup-image" href="/splash.png" />(放在<head>页面的部分).

其中splash.png是垂直方向的320x460图像.

我似乎无法让它工作......有没有人有任何提示和技巧?

Seb*_*oli 8

确保它是320x460像素.

你已经说过了,但这对我来说是解决方案.


pup*_*its 6

您只能设置一个启动画面,否则它将失败.要选择ipad或iphone启动画面,您需要一点点javascript.

可用于本机应用程序的ipad横向启动画面不适用于Web应用程序.iphone4的视网膜闪屏也不会.您只能选择ipad或iphone尺寸的闪光灯.在link元素上设置size属性似乎适用于ipad.但是有多个启动图像链接元素会导致iphone失败.

启动画面大小必须准确.iphone/ipod为320x460,ipad为1024x748.如果您需要横向斜线屏幕,则需要在Photoshop中旋转它,因为在应用重启期间无法控制.

要测试它最好首先尝试关闭app缓存并使用charles代理或类似的东西来限制带宽.

<!-- status bar -->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!-- hide safari chrome -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- iphone start up screens -->
<script type="application/javascript">
    var appl = document.createElement("link");
    appl.setAttribute('rel', 'apple-touch-startup-image');
    if(screen.width < 321 && window.devicePixelRatio == 1) {
      appl.setAttribute('href', 'img/icons/launch320x460.png'); //iphone 3Gs or below
    } else if (screen.width < 321 && window.devicePixelRatio == 2) { 
      //setting @2x or a 640x920 image fails, just use the iphone splash screen
    } else if (screen.width < 769 && Math.abs(window.orientation) != 90) {
      appl.setAttribute('href', 'img/icons/launch1024x748.png'); //ipad 2 or below (portait)
    } else if (screen.width < 769 && Math.abs(window.orientation) == 90) { 
      //landscape fails as well, use standard ipad screen
    }
    document.getElementsByTagName("head")[0].appendChild(appl);
</script>

<!-- iphone springboard icons -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/icons/icon57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/icon114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/icons/icon72x72.png" />
Run Code Online (Sandbox Code Playgroud)


ric*_*and 3

Apple 没有太多关于此主题的文档(请参阅此 URL)。

有几点需要注意:

  • 您提供的代码片段假设您的图像位于http://yourdomain.com/splash.png
  • 这仅适用于 iPhone OS 3.0 及更高版本
  • 图片必须是 PNG
  • 图像仅在页面的 DOM 准备好之前显示

您还可以使用以下代码显式设置 Web 应用程序图标:

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
Run Code Online (Sandbox Code Playgroud)