apple-touch-startup-image

时间 2019-11-21

标签 apple touch startup image 栏目 MacBook 繁體版

原文原文链接

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

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

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

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是无效的。app

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

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

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

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

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

具体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

更多相关文章...