viewport 最佳實踐

移動端開發有各類適配方案，有淘寶的，網易的...,但各類方案都會有各自的問題和開發難度；

今天我的在手機端實測能夠使用的最佳配置產生了，頁面UI設計和前端開發徹底一致，開發效率和pc時代一致；無需rem,lesss，sass,無需關注vw,vh的兼容，只要知道px就能搞定全部適配，能夠隨意使用各類position定位。

下面是viewport的最佳配置實例：

• 能夠根據設計稿的尺寸進行寬度調整，下例爲750

<meta id="vp" name="viewport" content="width=750,initial-scale=0.5,maximum-scale=0.5,minimum-scale=0.5,user-scalable=no">複製代碼

以上的代碼，已經能夠使得頁面在任何移動端正常的工做了，只是因爲是適配750的，所以在iphone6下是最佳體驗，其餘尺寸屏幕會出現滾動條或者留白。

去除滾動條或者留白

• 只需附加2行JS代碼就能夠解決這個問題了

var w1=window.innerWidth,scale=w1/750*0.5;
document.getElementById('vp').content='width=750,initial-scale='+scale+',maximum-scale='+scale+',minimum-scale='+scale+',user-scalable=no';複製代碼

好了，如今能夠愉快的把移動端網頁開當作寬度750的pc頁面來開發了。

通過測試，安卓和iOS下工做正常，微信和普通瀏覽器也OK

沒有任何附加的學習成本，立立刻手你的移動項目吧！