html5移動Web開發實戰

標籤：

1.解決橫豎屏字型大小變化

html{            -webkit-text-size-adjust: 100%;            -ms-text-size-adjust: 100%;            text-size-adjust:100%;        }

2.移動viewport 裝置寬度、禁止縮放

 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

3.css3媒體查詢

div{background: red;height: 100px;}        @media screen and (min-width: 480px){    // 大於480px green            div{background: green;}        }

4.可以繼續使用px 不用em

 5.解決古老行動裝置瀏覽器不識別viewport

 

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">    <meta name="HandheldFriendly" content="true"/>     <!--古老的行動裝置不識別viewport屬性 PlamOS-->    <meta name="MobileOptimized" content="320">       <!--微軟的PocketPC-->

6.解決safari 橫豎屏切換字型變大

<script>          var metas = document.getElementsByTagName(‘meta‘);            var i;            if (navigator.userAgent.match(/iPhone/i)) {                for (i=0; i<metas.length; i++) {                    if (metas[i].name == "viewport") {                        metas[i].content = "width=device-width, minimum-scale=1.0, maximum-scale=1.0";                    }                }                document.addEventListener("gesturestart", gestureStart, false);            }            function gestureStart() {                for (i=0; i<metas.length; i++) {                    if (metas[i].name == "viewport") {                        metas[i].content = "width=device-width, minimum-scale=0.25, maximum-scale=1.6";                    }                }            }        </script>

 

html5移動Web開發實戰