apple-touch-startup-image

当把网站通过safari添加到主屏幕功能放置到移动设备桌面上以后，通过设置apple-touch-startup-image可以为WebApp设置一个类似NativeApp的启动画面。

在<head></head>区域加入<link rel="apple-touch-startup-image" href="/startup.png">即可。

在iPhone及iTouch设备上，只支持竖屏模式，图片分辨率为320×460。在iPad上支持竖屏和横屏两种模式，分辨率分别为768x1004和748x1024，注意横屏模式的图片宽高以及内容显示方式。参考下面的示意图：

apple-touch-startup-image不支持sizes属性，因此，不能像 apple-touch-icon 一样用sizes来支持多种设备屏幕，这里要用到media querys属性：

<link rel="apple-touch-startup-image" href="/startup-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<link rel="apple-touch-startup-image" href="/startup-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />

<link rel="apple-touch-startup-image" href="/startup.png" media="screen and (max-device-width: 320)" />

视网膜屏下的启动画面（Retina）

iPhone4及4S的屏幕分辨率为640x960，用320x460的启动画面显得有些模糊，可不可以用更高的分辨率呢，测试iPhone4及4S在IOS5.0以上系统是支持更高分辨率的显示画面的，不过用media queries是无效的。

国外看到一篇文章中提出用javascript来操作，经实验是有效的，具体步骤如下：

  1. 在DOM载入完毕以后执行js脚本；
  2. 检查浏览器是否为IOS系统；
  3. 检查是否为视网膜屏幕（Retina）；
  4. 检查IOS系统是否为5.0及以上；

以上条件成立，刚在head区域插入相应的link标签

<link rel="apple-touch-startup-image" href="/startup2x.png" />

startup2x.png为640x920分辨率的启动画面。

具体JS代码如下：

<script type="text/javascript">
        // Hides the addressbar on non-post pages
        function hideURLbar() { window.scrollTo(0,1); }
        addEventListener('load', function() { setTimeout(hideURLbar, 0); }, false );
    </script>
    <script type="text/javascript">
        function hasRetinaDisplay() {
            return (window.devicePixelRatio >= 2);
        }
        function isAppleDevice() {
            return (/iphone|ipod|ipad/gi).test(navigator.platform);
        }
        function iOSNewerThan(majorVersion) {
            if(isAppleDevice()) {
                // Check the version
                var pattern = /iPhone OS (.*) like Mac/;
                var result  = navigator.userAgent.match(pattern); // Returns "iPhone OS X_Y like Mac, X_Y"
                var version = result[1].split(''); // Returns X, Y
                var release = version[0];
                return (release >= majorVersion);
            }
            return false;
        }

        // When we're ready to go...
        jQuery(document).ready(function() { 
            if(hasRetinaDisplay() && iOSNewerThan(5)) { 
                var highResSplash = '<link rel="apple-touch-startup-image" href="/startup2x.png" />'; 
                jQuery('head').append(highResSplash); 
            }
        });
    </script>

The New iPad上的启动画面是否可以同理用JS脚本来解决，尚未测试，有兴趣的同学可以试一下。

参考网址:
http://www.paulofierro.com/

Safari Web Content Guide -- Configuring Web Applications

 

转  http://motype.org/post/design/apple-touch-startup-image#toc_0

posted @ 2014-09-17 20:46  云中雀  阅读(1637)  评论(0)    收藏  举报