首页 文章

适用于iOS网络应用的多个“苹果触摸启动图像”分辨率（尤其适用于iPad）？

提问于
浏览 次
57

我已经编写了一个基于HTML5的iOS Web应用程序，似乎都运行良好，但我正在尝试用多个启动屏幕来完善它 . iPhone / iPod touch适用于320x460的PNG，如下所示：

<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />

我发现大量的文档说明iPad的启动图像应该像iPhone / iPod touch一样，从高度上剃掉20px，以适应状态栏，分辨率为768x1004（纵向）或1024x748（横向） . 但是，在我的测试中（目前用于运行iOS 3.2.2的iPad），只有768x1004（人像）分辨率可以工作（但是在横向模式下不正确 - 20px太窄 - ） .

我尝试了以下（基于 apple-touch-icon 链接的功能的疯狂猜测），无济于事：

<link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" />
<link rel="apple-touch-startup-image" sizes="1024x748" href="img/startup_screen-1024x748.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="img/startup_screen-768x1004.png" />

如果列出的是最后一个 link 元素，则只有768x1004分辨率图像有效 . 如果1024x748分辨率图像是最后一个，则会呈现灰色背景（但不会是768x1004） . 所以，显然 apple-touch-startup-image link 不支持 sizes 属性 .

iOS的较新版本是否支持此功能？有没有办法支持多个启动图像？我应该创建1024x768启动映像吗？如果是这样，iPhone / iPod touch的缩小比例是多少？或者，我应该放弃，而不是iPad的启动图像？

ipad mobile-safari ios web-applications

13 回答

  • 18

    显然，启动屏幕仅在以下条件下工作

    1）必须是设备所需的确切尺寸 . 2）启动应用程序时，设备必须处于纵向方向 . 3）有些消息来源只说png，但jpg似乎现在有效 .

    回复于
  • 1

    适用于iPad和iPhone的 startup-image 和 touch-icons 的最终解决方案（风景||肖像）和（视网膜||不）：

    <!-- iPhone ICON -->
        <link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon">
        <!-- iPad ICON-->
        <link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon">
        <!-- iPhone (Retina) ICON-->
        <link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon">
        <!-- iPad (Retina) ICON-->
        <link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon">

        <!-- iPhone SPLASHSCREEN-->
        <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
        <!-- iPhone (Retina) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPad (portrait) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image">
        <!-- iPad (landscape) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image">
        <!-- iPad (Retina, portrait) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPad (Retina, landscape) SPLASHSCREEN-->
        <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
        <!-- iPhone 6/7/8 -->
        <link href="/images/favicon/750x1334.png" media="(device-width: 375px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
        <!-- iPhone 6 Plus/7 Plus/8 Plus -->
        <link href="/images/favicon/1242x2208.png" media="(device-width: 414px) and (-webkit-device-pixel-ratio: 3)" rel="apple-touch-startup-image" />
    回复于
  • 3

    我实际上让它在横向模式下工作 . 我在这里得到的信息：https://gist.github.com/472519 .

    问题是景观图像必须是748x1024（侧面的横向图像，我顺时针旋转）而不是1024x748 .

    我还必须首先以纵向模式启动应用程序然后横向启动 .

    回复于
  • 1

    我只想提供实际有用的答案组合 . 我们发现选择的答案，没有使用飞溅图像的视网膜版本 . Pavel的答案修复了iPad的视网膜版本 . 以下内容已经在iPhone（Retina和非视网膜）和iPad（视网膜和非视网膜）上进行了测试 .

    <!-- For third-generation iPad with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png">
<!-- For iPhone with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">
<!-- For first- and second-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">
<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">

<!-- iPhone SPLASHSCREEN-->
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) SPLASHSCREEN-->
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 460px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5 (Retina) SPLASHSCREEN-->
<link href="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 (non-Retina) (Portrait) -->
<link href="apple-touch-startup-image-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="apple-touch-startup-image" />
<!-- iPad (non-Retina) (Landscape) -->
<link href="apple-touch-startup-image-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Portrait) -->
<link href="apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
<!-- iPad (Retina) (Landscape) -->
<link href="apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

    我不能相信任何这一点，但这种配置有效 . 只需复制和粘贴，确保使图像完全符合其名称中指定的大小 .

    回复于
  • 2

    如果一个链接元素缺少媒体属性，则对我来说不起作用 . 代码在iPhone 3G和iPad上成功显示了启动图像（纵向和横向模式） .

    <-- iPad - landscape (748x1024) -->
<link rel="apple-touch-startup-image" href="images/ipad-landscape.png"  media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
<-- iPad - portrait (768x1004) -->  
<link rel="apple-touch-startup-image" href="images/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
<-- iPhone - (320x460) -->
<link rel="apple-touch-startup-image" href="images/iphone-lowres.png" media="screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)" />

    无法尝试iPhone4（高分辨率），但最有可能它的工作方式相同 .

    回复于
  • 2

    最完整，最先进的解决方案：https://gist.github.com/tfausak/2222823

    回复于
  • 18

    花了一些时间搞清楚如何为新iPad（Retina）制作闪屏，这是我测试和工作的解决方案，适用于新iPad（Retina）的定位 .

    附：在发布之前我已经测试了已经给出的解决方案而且它们没有用 .

    <!-- iPad (Retina) (Portrait) -->
<link href="/img/ios/apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

<!-- iPad (Retina) (Landscape) -->
<link href="/img/ios/apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
    回复于
  • 13

    这对某些人来说可能是显而易见的，但启动图像对我来说不起作用，除非我添加了我添加了主屏幕的快捷方式，从那里运行它，并具有以下代码：

    <meta name="apple-mobile-web-app-capable" content="yes" />

    这个页面对于解决这个问题非常有用：http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images

    回复于
  • 2

    我能够在iPhone / iPad / iPhoneRetina上为WebApps获取4个单独的启动图像的方式是一些事情的组合......

    非Retina iPhone（320x460）：

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

    Retina iPhone（4和4S）（640x920）：使用上面发布的Javascript技术 . http://www.paulofierro.com/archives/568/

    iPad（两种方向）都很棘手 . 景观必须为748w×1024h，“底部”为左侧 . 纵向必须为768w x 1004h，“底部”为底部 . 我必须通过检测用户代理中的iPad来通过PHP包含iPad标签，否则无法加载非视网膜iPhone启动图像 . 这是代码......

    <?php $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); ?>
            <?php if ($isiPad) { ?>
            <link rel="apple-touch-startup-image" href="startup-landscape.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
            <link rel="apple-touch-startup-image" href="startup-portrait.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />
            <?php } ?>

    通过以上操作，我的webapp（实际上是一个简单的wordpress博客网站，目前正在离线工作）可以为iPhone，Retina和iPad两个方向提供启动图像 . 测试iPhone 3G运行最新的iOS 4，iPad和iPhone 4都运行最新的iOS 5 .

    当然你也可以通过javascript包含iPad代码 . 大声笑

    回复于
  • 77

    我已经测试了很多次，现在我当你这样做时确定它有效：首先以纵向方式握住你的垫，打开你的应用程序，然后以横向方式 grab 你的应用程序，打开你的应用程序 . 糟透了但......似乎这是唯一的方法 . 你必须先拿着你的垫子肖像来“解锁”这个bug .

    回复于
  • 1

    完整元：

    <!-- Icons -->

<!-- iOS 7 iPad (retina) -->
<link href="icon-152x152.png"
      sizes="152x152"
      rel="apple-touch-icon">

<!-- iOS 6 iPad (retina) -->
<link href="icon-144x144.png"
      sizes="144x144"
      rel="apple-touch-icon">

<!-- iOS 7 iPhone (retina) -->
<link href="icon-120x120.png"
      sizes="120x120"
      rel="apple-touch-icon">

<!-- iOS 6 iPhone (retina) -->
<link href="icon-114x114.png"
      sizes="114x114"
      rel="apple-touch-icon">

<!-- iOS 7 iPad -->
<link href="icon-76x76.png"
      sizes="76x76"
      rel="apple-touch-icon">

<!-- iOS 6 iPad -->
<link href="icon-72x72.png"
      sizes="72x72"
      rel="apple-touch-icon">

<!-- iOS 6 iPhone -->
<link href="icon-57x57.png"
      sizes="57x57"
      rel="apple-touch-icon">

<!-- Startup images -->

<!-- iOS 6 & 7 iPad (retina, portrait) -->
<link href="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">

<!-- iOS 6 & 7 iPad (retina, landscape) -->
<link href="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">

<!-- iOS 6 iPad (portrait) -->
<link href="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">

<!-- iOS 6 iPad (landscape) -->
<link href="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">

<!-- iOS 6 & 7 iPhone 5 -->
<link href="startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 & 7 iPhone (retina) -->
<link href="startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

<!-- iOS 6 iPhone -->
<link href="startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
    回复于
  • 1

    iPhone 6和iPhone 6

    <link href="launch6.png" media="(device-width: 375px)" rel="apple-touch-startup-image">
<link href="launch6plus.png" media="(device-width: 414px)" rel="apple-touch-startup-image">

    从这个链接：http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers

    回复于
  • 0

    如果你想定位视网膜显示器，我找到了一个解决方案，并在这里写了博客：http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps-retina-displays-also-welcome

    基本上，尺寸属性和媒体查询将无法正常工作 . 一旦页面加载，您必须通过JavaScript注入高分辨率启动映像 . Hacky但是很有效 .

    回复于

相关问题