20

对于网络应用，您可以使用 apple-touch-startup-image 设置启动屏幕

iPad 怎么样？

4

8 回答 8

17

我也遇到了同样的问题...您需要使用 1004*768 的特定尺寸。我在这个博客中解释了它：http ://www.amirnaor.com/?p=71

于 2010-05-06T21:24:17.497 回答
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 应用程序，建议同时使用横向和纵向尺寸。

于 2012-03-04T04:11:34.207 回答
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)" />

发布此内容时以前的答案（包括已接受的答案）不适用于我的测试。

于 2012-06-05T04:50:44.207 回答
1

我认为 Madhup 指的是用 Objective C 编写并用 xcode 编译的本机应用程序。OP 正试图使其适用于通过 safari 添加到主屏幕的 web 应用程序。到目前为止还没有让它工作:(

于 2010-04-27T16:59:43.030 回答
1

我只是通过制作尺寸为 748x1024 的 PNG 图像来使启动图像工作。这是在固件 3.2.1 的 iPad 上测试的。

于 2010-08-24T19:53:18.623 回答
1

我能找到这个问题的最佳解释：https ://gist.github.com/472519

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

于 2011-09-12T21:21:37.897 回答
-1

从我今天的测试来看，iPad 似乎不支持 apple-touch-startup-image。令人失望的是，iPhone 确实在 OS 3.1 中支持此功能，而 iPad 不支持。此外，在无铬浏览器中使用 web 应用程序时，视口设置不正确。我相信两者都是 iPad OS 3.2 中的错误或遗漏。太糟糕了:(我确实在苹果论坛上要求过：https ://devforums.apple.com/thread/47178

于 2010-04-20T15:13:44.337 回答
-2

这和iphone是一样的。Default.png在资源文件夹中放置一个名为 png的文件。

于 2010-04-14T03:41:38.317 回答