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>