WebApp化(二)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上支持竖屏和横屏两种模式,分辨率分别为768x1004748x1024,注意横屏模式的图片宽高以及内容显示方式。参考下面的示意图:
启动画面示意图

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

Comments
Write a Comment