- 來源：一個方案 - 適配所有移動端網(wǎng)頁
- 作者：yuyuyu
在學習過程中如果有疑問珍促，請到極樂網(wǎng)提問！
做過移動端網(wǎng)頁的都知道垦细，在一些高要求的移動網(wǎng)頁上解決Iphone5如蚜、6压恒、6p的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意错邦，各種設(shè)備上顯示還有稍微有一點差距的探赫。
我曾今也嘗試了很多辦法，也參考了別人加的思路撬呢，有的用js伦吠，有的用媒體查詢，有的用一些比較新的單位rm魂拦、rem等等...... 我覺得還是很麻煩毛仪，難道就沒有一個可以一行代碼解決問題的方案嗎？經(jīng)過我各種的嘗試之后終于有了芯勘，目前階段還沒發(fā)現(xiàn)bug箱靴，如果有問題，還請不吝賜教!
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
相信這一段代碼是在移動端上必須的一段荷愕，大概的意思大家也都知道
- width=device-width：讓寬度=設(shè)備縮放之后的寬度衡怀，就是320、360路翻、375狈癞、414這些。
- initial-scale=1：初始化的縮放比例1茂契，這個屬性和css中transform: scale(1);有異曲同工之妙蝶桶。
- minimum-scale=1：最小縮放比例，相當于你給div設(shè)置mix-height一樣掉冶，帶有限制真竖。
- maximum-scale=1：最大縮放比例脐雪，同上，不說了恢共。
- user-scalable=no：是否允許用戶使用雙指進行縮放战秋，（默認不允許）。
看了這些讨韭，我就想 width=device-width 我就不能設(shè)置一個固定值嗎脂信？width=320， 經(jīng)過我的測試透硝，發(fā)現(xiàn)是可以的狰闪。
<meta name="viewport" content="width=320,user-scalable=no" />
哈哈哈！ 完美解決濒生，經(jīng)過我長期的實驗埋泵，這里有一個坑，就是 width=固定寬度 之后是不能 寫 initial-scale=1 的罪治，（寫了之后在有些瀏覽器中不行丽声，所以建議不寫）。
最后附一個1px極細邊框線的教程觉义。大多數(shù)的前端的設(shè)計圖應(yīng)該都是640或者720的寬度雁社，當我們寫border:1px的時候，實際上是物理相似2px谁撼，這種情況平時做直線的時候勉強可以應(yīng)付歧胁，transform: scaleY(0.5);這樣看起來就洗了很多，但是做圓角的按鈕的時候就力不從心了厉碟，而且大量使用transform 的代碼也不是很優(yōu)雅喊巍，這個時候我們可以
這樣：
<meta name="viewport" content="width=640,user-scalable=no" />
你沒看錯，就是640箍鼓，和設(shè)計圖的尺寸一模一樣崭参，每次大的值都不用在除以2了，有的時候 一個 25px除以2的時候就是不是還在糾結(jié)是寫12px呢還是13px呢款咖？ 這樣寫的 網(wǎng)頁實現(xiàn)在手機上運行的效果看起來會細膩很多何暮。
本文完！
在學習過程如果有任何疑問铐殃，請來極樂網(wǎng)提問海洼，或者掃描下方二維碼，關(guān)注極樂官方微信富腊，在平臺下方留言~
