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

作過移動端網頁的都知道，在一些高要求的移動網頁上解決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了，有的時候 一個 25除以2的時候就是否是還在糾結是寫12呢仍是13呢？ 這樣寫的 網頁實如今手機上運行的效果看起來會細膩不少。