iPad apple-touch-startup-image实现portrait和landscape

最新推荐文章于 2024-07-25 12:30:25 发布

转载最新推荐文章于 2024-07-25 12:30:25 发布 · 207 阅读

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/sunshq/p/3739440.html

本文提供了一种在iPad上设置启动画面的方法，包括如何使用不同的图片来适应横屏和竖屏模式，并确保在添加到主屏幕时能够正确显示。通过在页面头部加入特定的<link>标签，可以确保无论设备处于哪种方向，都能自动选择正确的启动画面。此外，文章还强调了在Safari浏览器中添加到主屏幕的操作时，设备需要保持竖直放置的重要性。

iPad apple-touch-startup-image实现portrait和landscape

为ipad制作web应用程序的启动画面时发现个问题，只能显示竖屏图，横屏图出不来，网上的朋友都说无法解决，做了无数次尝试，终于成功，如下：

首先页面头部里要加入

重点在下面：

两张图片必须符合宽高标准才能正常显示：

startup_portrait.png 768×1004

startup_landscape.png 748×1024

1、要注意横屏用图必须竖过来，也就是宽748高1024才能显示，怕说不清楚做了个示意图

2、今天又发现，在safari里选“添加到主屏幕”时要保证设备是竖放，才能在完成后成功显示启动画面。

以上在iPad 1代 4.3.1系统上实验成功。

 
     <!-- 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">