logo标签列表

iPad是否有与apple-touch-startup-image等效的功能？

iphoneipadsplash-screenipod-touchiphone-5
20

对于 Web 应用程序，您可以使用 apple-touch-startup-image 设置启动画面。

那么，对于 iPad 呢？

8个回答
17
14

这将为您的Web应用程序添加启动画面。下面是iPad和iPhone / iPod Touch以及iPhone 5所需的尺寸，包括状态栏区域。

<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iPhone (Retina) -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iPhone 5 -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iPad -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-768x1004.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">

<!-- iPad (Retina) -->
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<link href="http://www.example.com/mobile/images/apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

如果要创建一个兼容iPad的Web应用程序，建议同时使用横向和纵向尺寸。

sizes 属性不被理解，您需要使用 media 代替。 - Timothy Walters
3

竖向图片需要768x1004（注意：1004而不是1024，20px用于状态栏），首选文件格式为PNG。

横向图片需要1024x748（注意：748再次为状态栏留出20px）。然后需要将此图像顺时针旋转90度，最终结果为748x1024。

头部链接标签应如下所示：

<link rel="apple-touch-startup-image" href="images/splash_screen_768x1004.png" media="(device-width: 768px) and (orientation: portrait)" />
<link rel="apple-touch-startup-image" href="images/splash_screen_1024x748.png" media="(device-width: 768px) and (orientation: landscape)" />

对于新的Retina iPad（如果您不添加这些内容，它将使用上面的像素加倍）：

<link rel="apple-touch-startup-image"
  href="images/splash_screen_1536x2008.png" 
  media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" />
<link rel="apple-touch-startup-image"
  href="images/splash_screen_2048x1496.png"
  media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" />

在我发布这篇文章时，以前的答案（包括被采纳的答案）都无法通过我的测试。

如果你要给我点踩，请解释一下原因，这样我就可以改正它。 - Timothy Walters
设备宽度不是必须参考实际的CSS分辨率吗？这意味着1024x768。 - lavirius
1

我认为Madhup指的是使用Objective C编写并通过Xcode编译的本地应用程序。 OP正在尝试使其适用于通过Safari添加到主屏幕的Web应用程序。 到目前为止还没有成功 :(

1

我只能通过制作一个尺寸为748x1024的PNG图像来使启动图像正常工作。这在使用固件3.2.1的iPad上进行了测试。

1

我能找到的最好的解释是：https://gist.github.com/472519

请注意，只有在为iPhone提供启动图像以及为iPad提供横向/纵向图像时，它才对我起作用。

-1
从我今天的测试来看，iPad似乎不支持apple-touch-startup-image。令人失望的是，iPhone在OS 3.1中支持此功能，而iPad却不支持。此外，在使用无边框浏览器中的Web应用程序时，视口没有正确设置。 我相信这两个问题都是iPad OS 3.2中的错误或遗漏。太糟糕了:( 我在苹果论坛上提出了这个问题：https://devforums.apple.com/thread/47178
-2

这与 iPhone 相同。将名为 Default.png 的 PNG 文件放入资源文件夹中。

iPad 应该支持所有的界面方向。因此，仅有 Default.png 是不够的。 - Madhup Singh Yadav
2
这不是OP所询问的内容。OP在询问Mobile Safari对<link>标签的特殊处理：http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW6 - Ben Zotto
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接