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

更多相關文章...

相關標籤/搜索

MacBook

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。