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

時(shí)間：2023-09-27 17:42:02 | 來源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-27 17:42:02 來源：網(wǎng)站運(yùn)營(yíng)

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

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

<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
相信這一段代碼是在移動(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：最大縮放比例，同上，不說了。
  
• user-scalable=no：是否允許用戶使用雙指進(jìn)行縮放，（默認(rèn)不允許）。

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



<meta name="viewport" content="width=320,user-scalable=no" />

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

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

這樣：

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


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