一個方案-適配所有移動端網(wǎng)頁

cnsworder 發(fā)布于2019-08-29 11:32 / 1001人閱讀

摘要：做過移動端網(wǎng)頁的都知道，在一些高要求的移動網(wǎng)頁上解決，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設(shè)備上顯示還有稍微有一點差距的。初始化的縮放比例，這個屬性和中有異曲同工之妙。最后附一個極細邊框線的教程。

做過移動端網(wǎng)頁的都知道，在一些高要求的移動網(wǎng)頁上解決Iphone5、6、6p，的屏幕適配問題上花了不少功夫，但有時候還是不盡滿意，各種設(shè)備上顯示還有稍微有一點差距的。

我曾今也嘗試了很多辦法，也參考了別人加的思路，有點用js，有的用媒體查詢，有的用一些比較新的單位rm、rem等等...... 我覺得還是很麻煩，難道就沒有一個可以一行代碼覺接問題的方案嗎？經(jīng)過我各種的嘗試之后終于有了，目前階段還沒發(fā)現(xiàn)bug，如果有問題，還請不吝賜教!

相信這一段代碼是在移動端上必須的一段，大概的意思大家也都知道
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)是可以的。

哈哈哈！完美解決，經(jīng)過我長期的實驗，這里有一個坑，就是 width=固定寬度之后是不能寫 initial-scale=1 的，（寫了之后在有些瀏覽器中不行，所以建議不寫）。

最后附一個1px極細邊框線的教程。大多數(shù)的前端的設(shè)計圖應(yīng)該都是640或者720的寬度，當我們寫border:1px的時候，實際上是物理相似2px，這種情況平時做直線的時候勉強可以應(yīng)付，transform: scaleY(0.5);這樣看起來就洗了很多，但是做圓角的按鈕的時候就力不從心了，而且大量使用transform 的代碼也不是很美觀，這個時候我們可以
這樣：

你沒看錯，就是640，和設(shè)計圖的尺寸一模一樣，每次大的值都不用在除以2了，有的時候一個 25除以2的時候就是不是還在糾結(jié)是寫12呢還是13呢？這樣寫的網(wǎng)頁實現(xiàn)在手機上運行的效果看起來會細膩很多。