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

In iPhone web applications you supposedly can define a custom splash screen that will appear while the site is loading (when loading the site from a saved bookmark icon on the home page). The point is to make the web app startup experience feel a lot more like a real iphone application.

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

I believe the syntax is like this:

我相信语法是这样的:

<link rel="apple-touch-startup-image" href="/splash.png" /> (placed in the <head> section of the page).

(放置在页面的部分)。

Where splash.png is a vertically oriented 320x460 image.

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

I can't seem to get it work... does anybody have any tips and tricks for this?

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

7 个解决方案

#1

Make sure it is 320x460 pixels.

确保它是320x460像素。

You already said that, but that was the solution for me.

你已经说过了,但那是我的解决方案。

#2

You can only set one splash screen or else it will fail. In order to select either an ipad or iphone splash screen you need a little javascript.

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

The ipad landscape splash screen that can be used for native apps doesn't work for web apps. Neither would a retina splash screen for the iphone4. You can only choose an ipad or an iphone sizes splash. Setting the size attribute on the link element seems to work on the ipad. But having more than one splash image link element makes the iphone fail.

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

The splash screen sizes must be exact. 320x460 for iphone/ipod and 1024x748 for ipad. If you need a landscape slash screen you'll need to rotate it in photoshop as there is no control during the app's relaunch.

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

To test it's best to try first with app cache off and throttle the bandwidth with charles proxy or something similar.

要测试它最好首先尝试关闭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" />

#3

Apple doesn't have much in the way of documentation on this topic (see this URL).

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

A couple of things to note:

有几点需要注意:

The code snippet you provided assumes your image is living at http://yourdomain.com/splash.png

您提供的代码段假设您的图片位于http://yourdomain.com/splash.png

This only works for iPhone OS 3.0 and later

这仅适用于iPhone OS 3.0及更高版本

The image must be a PNG

图像必须是PNG

The image is only displayed until the page's DOM is ready

仅在页面的DOM准备就绪之前显示图像

You can also use the following code to explicitly set the web app icon:

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

<link rel="apple-touch-icon" href="/apple-touch-icon.png" />

#4

Make sure all these links come after your other stylesheets in your header.

确保所有这些链接都在标题中的其他样式表之后。

#5

iOS 4 does not show the splash screen if you have a notification bar at the top - e.g. when using the personal hotspot (tethering).

如果顶部有通知栏,iOS 4不会显示启动画面 - 例如使用个人热点时(网络共享)。

#6

Every time I run into this problem it is almost always caused by calling more than one splashscreen for the same page or the splashscreen not being 320x460 pixels (exactly). This should do the trick:

每次遇到这个问题时,几乎总是由于为同一页面调用多个闪屏,或者闪屏不是320x460像素(确切地说)。这应该是诀窍:

<link rel="apple-touch-startup-image" href="/splash-iphone.jpg" />

But before calling the splashscreen, you should include these three lines of code as well:

但在调用splashscreen之前,您还应该包含以下三行代码:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

#7

You are right, this code must be in section and the image must be 320x460 pixels, the reason why it is not working is the picture MUST be a small file like 20KB or 25KB or less. I had the same problem, but when i reduce the file that begin to work.

你是对的,这段代码必须在截面中,图像必须是320x460像素,之所以不起作用,图片必须是20KB或25KB或更小的小文件。我有同样的问题,但当我减少开始工作的文件。

cheers

#1