一個(gè)方案 - 適配所有移動(dòng)端網(wǎng)頁(yè)

Jingbin_ 發(fā)布于2019-08-21 11:19 / 1446人閱讀

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

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

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

相信這一段代碼是在移動(dòng)端上必須的一段，大概的意思大家也都知道

width=device-width：讓寬度=設(shè)備縮放之后的寬度，就是320、360、375、414這些。

initial-scale=1：初始化的縮放比例1，這個(gè)屬性和css中transform: scale(1);有異曲同工之妙。

minimum-scale=1：最小縮放比例，相當(dāng)于你給div設(shè)置mix-height一樣，帶有限制。

maximum-scale=1：最大縮放比例，同上，不說(shuō)了。

user-scalable=no：是否允許用戶使用雙指進(jìn)行縮放，（默認(rèn)不允許）。

看了這些，我就想 width=device-width 我就不能設(shè)置一個(gè)固定值嗎？width=320，經(jīng)過(guò)我的測(cè)試，發(fā)現(xiàn)是可以的。

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

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

這樣：

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

看到有很多同學(xué)面對(duì)這個(gè)的一些問(wèn)題，我這里更新一點(diǎn)，都覺(jué)得不能全部適用，我這里謝了一個(gè)demo，放在了個(gè)人網(wǎng)站上，有興趣的同學(xué)可以研究下，可以在chrome瀏覽器中模擬移動(dòng)設(shè)備，也可以用手機(jī)打開(kāi)這個(gè)網(wǎng)站，建議用手機(jī)打開(kāi)，畢竟chrome瀏覽器無(wú)法模擬手機(jī)的物理1px. demo地址 http://demo.yuanyuanyuan.me/v...