開發過移動端頁面的朋友都知道，在程式碼頭部應該加入這樣一句話：

<meta name="viewport" content = "width=device-width,initial-scale = 1,maximum-scale = 1,minimum-scale = 1,user-scaleble = no">

注：
1.initial-scale：設定網頁初始時候的大小
2.maximum-scale：設定網頁最大放大多少
3.minimum-scale：設定網頁最小縮小多少
4.user-scaleble：是否允許使用者放大或縮小網頁，no為不允許

然而，在開發過程中，1px的底部邊框在安卓上顯示正常，在iPhone6中看起來比1px粗，這是因為手機解析度比較大，導致一個畫素由幾個點組成，那麼，我們就需要動態生成meta標籤插入頭部來處理這個問題。

<script>
        var metaEl = document.createElement('meta');
        var scale = isRetina ? 0.5 : 1 ;
        metaEl.setAttribute('name','viewport');
        metaEl.setAttribute('content'
 
,'initial-scale='+ scale +',maximum-scale='+ scale +',minimum-scale = '+ scale +',user-scaleble = no');
        if(document.documentElement.firstElementChild) {
            document.documentElement.firstElementChild.appendChild(metaEl);
        } else {
            var wrap = document.createElement('div'
 
);
            wrap.appendTo('metaEl');
            document.write(wrap.innerHTML);
        }
    </script>

然而，iPhone6和iPhone7又不一樣，那我們就可以根據縮放比例將scale變為0.3或0.5,。
如上是手機淘寶的處理方式，朋友們若有其他的方式，歡迎互動交流。

每天進步一點點！！！