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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了适用于iOS网络应用的多个“苹果触摸启动图像”分辨率(尤其适用于iPad)?相关的知识,希望对你有一定的参考价值。

我已经编写了一个基于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和iPhone的启动图像和触摸图标的最终解决方案(风景||肖像)和(视网膜||不):

        <!-- 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" />
另一答案

我已经测试了很多次,现在我确信它的工作方式是这样的:首先以纵向方式握住你的垫,打开你的应用程序,然后以横向方式抓住你的应用程序,打开你的应用程序。糟透了但......似乎这是唯一的方法。你必须先拿着你的垫子肖像来“解锁”这个bug。

另一答案

完整元:

<!-- 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">
另一答案

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

另一答案

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

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

另一答案

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

问题是景观图像必须是748x1024(侧面的横向图像,我顺时针旋转)而不是1024x748。

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

另一答案

我只想提供实际有用的答案组合。我们发现选择的答案,没有使用飞溅图像的视网膜版本。 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)

以上是关于适用于iOS网络应用的多个“苹果触摸启动图像”分辨率(尤其适用于iPad)?的主要内容,如果未能解决你的问题,请参考以下文章

应用商店拒绝适用于 iPad 上 iOS 10.1.1 的 iPhone 应用

适用于 iOS 应用程序的具有多个捆绑标识符的 URL 类型

适用于多个客户端的 iOS 企业分发版

如何将 workbook_open 应用于多个工作表

iPhone iso的Tesseract限制?适用于 ios 的任何其他 OCR 引擎

如何实现不同分辨率的图像