当有人从iPhone加载我们的应用时,我们使用以下元标记来显示加载屏幕,但是当我们点击主屏幕图标时,只显示白页。我们还需要做些什么来启用加载屏幕?
该网站为www.tekiki.com。
<link rel='apple-touch-icon-precomposed' href='/images/dandy/dandy_57.png' />
<link rel='apple-touch-startup-image' media='(device-width: 480px)' href='/images/dandy/loading_screen.png'>
<link rel='apple-touch-startup-image' media='(device-height: 568px)' href='/images/dandy/loading_screen_iphone5.png'>
答案 0 :(得分:0)
我猜你还没有指定正确的尺码。
您可以找到SO in this post
上的标签列表我无法测试此权利,但您可能会在apple-touch-startup-image
上查找有用的帖子,例如this one,并且可能需要合并其中一些。
这看起来像一个完整的,除了非常新鲜的集合(来自http://www.miguelmota.com/blog/iphone-and-ipad-web-app-startup-images/)
<!--iPhone and iPad Web App Startup Images -->
<!-- Do NOT use width=device width because it will letterbox viewport. -->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<!-- iPhone 3 and 4 Non-Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="apple-touch-startup-image-320x460.png">
<!-- iPhone 4 Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x920.png">
<!-- iPhone 5 Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
<!-- iPad Non-Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="apple-touch-startup-image-768x1004.png">
<!-- iPad Non-Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="apple-touch-startup-image-748x1024.png">
<!-- iPad Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-1536x2008.png">
<!-- iPad Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-2048x1496.png">`
答案 1 :(得分:0)
查看移动设备的www.tekiki.com的html源代码我发现了两个问题:
这是当前源代码的片段
<!-- iPhone 3 and 4 Non-Retina -->
<link rel='apple-touch-startup-image' media='(device-width: 320px)' href='apple-touch-startup-image-320x460.png'>
<!-- iPhone 4 Retina -->
<link rel='apple-touch-startup-image' media='(device-width: 320px) and (-webkit-device-pixel-ratio: 2)' href='apple-touch-startup-image-640x920.png'>
<!-- iPhone 5 Retina -->
<link rel='apple-touch-startup-image' media='(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)' href='apple-touch-startup-image-640x1096.png'>
对于iPhone 4和iPhone 5链接元素,href值不正确,需要添加'/ images / dandy /'前缀。
设备宽度似乎无法在iPhone 4和iPhone 5上运行。应使用max-device-width而不是设备宽度。
这是我在iPhone 4S上运行的测试html代码(我还没有测试任何其他iPhone型号):
<!-- iPhone 3 and 4 Non-Retina -->
<link rel='apple-touch-startup-image' media='(device-width: 320px)' href='http://www.tekiki.com/images/dandy/apple-touch-startup-image-320x460.png'>
<!-- iPhone 4 Retina -->
<link rel='apple-touch-startup-image' media='(max-device-width: 480px) and (-webkit-min-device-pixel-ratio : 2)' href='http://www.tekiki.com/images/dandy/apple-touch-startup-image-640x920.png'>
<!-- iPhone 5 Retina -->
<link rel='apple-touch-startup-image' media='(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)' href='http://www.tekiki.com/images/dandy/apple-touch-startup-image-640x1096.png'>
您可能会发现有用的优秀博文:http://stuffandnonsense.co.uk/blog/about/home-screen-icons-and-startup-screens
修改强>
iPhone 4S正在加载320px加载屏幕而不是640px图片。所以我更新了html标记。