移動端響應式佈局

    <script>
        var pixclPation = 1/window.devicePixelRation;
        document.write('<meta name="viewport" content="width=device-width,initial-scale='+pixelRatio+',minimum-scale='+pixelRatio+',maximum-scale='+pixelRatio+'" />');
    </script>

 1.經過設置縮放比例，讓1px作1px的事情。這樣就不會出如今不一樣屏幕時候，1px顯示不是1px的狀況。

 

var html = document.getElementsByName('html')[0];
var pageWidth = html.getBoundingClientRect().width;
html.style.fontSize = pageWidth/16 + 'px';

 2.設置em，這樣根據字體來響應式佈局

 

html{
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body{
    width: 100%;
    height: 100%;
    overflow: auto;
}

3.讓body來控制頁面的尺寸

 

a {
    //取消a標籤手指按下時出現的黑色遮罩層
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
}
input{
    //解決ios下表單元素圓角的問題
    -webkit-appearance: normal;
}