一個方案 - 適配全部移動端網頁

作過移動端網頁的都知道，在一些高要求的移動網頁上解決Iphone五、六、6p的屏幕適配問題上花了很多功夫，但有時候仍是不盡滿意，各類設備上顯示還有稍微有一點差距的。

我曾今也嘗試了不少辦法，也參考了別人加的思路，有的用js，有的用媒體查詢，有的用一些比較新的單位rm、rem等等...... 我以爲仍是很麻煩，難道就沒有一個能夠一行代碼解決問題的方案嗎？通過我各類的嘗試以後終於有了，目前階段還沒發現bug，若是有問題，還請不吝賜教!

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

相信這一段代碼是在移動端上必須的一段，大概的意思你們也都知道

• width=device-width：讓寬度=設備縮放以後的寬度，就是320、360、37五、414這些。

• initial-scale=1：初始化的縮放比例1，這個屬性和css中transform: scale(1);有殊途同歸之妙。

• minimum-scale=1：最小縮放比例，至關於你給div設置mix-height同樣，帶有限制。

• maximum-scale=1：最大縮放比例，同上，不說了。

• user-scalable=no：是否容許用戶使用雙指進行縮放，（默認不容許）。

看了這些，我就想 width=device-width 我就不能設置一個固定值嗎？width=320， 通過個人測試，發現是能夠的。

<meta name="viewport" content="width=320,user-scalable=no" />

哈哈哈！ 完美解決，通過我長期的實驗，這裏有一個坑，就是 width=固定寬度 以後是不能寫 initial-scale=1 的，（寫了以後在有些瀏覽器中不行，因此建議不寫）。

最後附一個1px極細邊框線的教程。大多數的前端的設計圖應該都是640或者720的寬度，當咱們寫border:1px的時候，其實是物理類似2px，這種狀況平時作直線的時候勉強能夠應付，transform: scaleY(0.5);這樣看起來就洗了不少，可是作圓角的按鈕的時候就力不從心了，並且大量使用transform 的代碼也不是很優雅，這個時候咱們能夠

這樣：

<meta name="viewport" content="width=640,user-scalable=no" />

你沒看錯，就是640，和設計圖的尺寸如出一轍，每次大的值都不用在除以2了，有的時候 一個 25px除以2的時候就是否是還在糾結是寫12px呢仍是13px呢？ 這樣寫的 網頁實如今手機上運行的效果看起來會細膩不少。

看到有不少同窗面對這個的一些問題，我這裏更新一點，都以爲不能所有適用，我這裏謝了一個demo，放在了我的網站上，有興趣的同窗能夠研究下， 能夠在chrome瀏覽器中模擬移動設備，也能夠用手機打開這個網站， 建議用手機打開，畢竟chrome瀏覽器沒法模擬手機的物理1px. demo地址 http://demo.yuanyuanyuan.me/v...