移動端適配方案

方案一:(原創)css

情景:根據750寬的設計稿進行排版佈局瀏覽器

思路:微信

先設置視口寬度爲750,進行正常排版佈局,單位用px,還原設計稿app

<meta name="viewport" content="width=750,target-densitydpi=device-dpi,user-scalable=no" /> -->
<meta name="format-detection" content="telephone=no"/>

到此爲止,雖然能在手機上正常預覽,看起來好像沒問題,但當你橫豎屏切換時,會發現一個bug,屏幕被放大了並且恢復不回來了。此時,你仍是須要把寬度改成設備寬度iphone

<meta name="viewport" content="width=device-width, initial-scale=1.0">

到此,頁面仍是被放大的,由於設備物理像素(分辨率)通常都比設備獨立像素(css,js中的px大小)大,dpi爲1的是一倍關係,dpi爲2的是2倍關係(iphone6,7,8),dpi爲3的是3倍關係(iphone6,7,8plus)佈局

而後把css全部px單位的大小如  375px 轉換爲 375/750*100  vw單位,根據這個計算公式:要求的vw單位的值/100vw = 當前px單位的值/原稿寬度spa

,能夠本身寫個js腳本,一次性把css文件中用正則匹配出全部的px值,替換爲vw值,ok搞定scala

 

額外:設計

獲取設備dpi:var dpi = window.devicePixelRatio;調試

獲取設備屏幕寬度:var width = document.documentElement.clientWidth;

iphone尺寸收集:
iPhone4:(設備像素比:2),(設備獨立像素:320x480),(狀態欄高:20px),(導航欄高:44px),(標籤欄高:49px)
iPhone5:(設備像素比:2),(設備獨立像素:320x568),(狀態欄高:20px),(導航欄高:44px),(標籤欄高:49px)
iPhone6:(設備像素比:2),(設備獨立像素:375x667),(狀態欄高:20px),(導航欄高:44px),(標籤欄高:49px)
iPhone7:(設備像素比:2),(設備獨立像素:375x667),(狀態欄高:20px),(導航欄高:44px),(標籤欄高:49px)
iPhone8:(設備像素比:2),(設備獨立像素:375x667),(狀態欄高:20px),(導航欄高:44px),(標籤欄高:49px)
iPhone6plus:(設備像素比:3),(設備獨立像素:414x736),(狀態欄高:20px),(導航欄高:44px),(標籤欄高:49px)
iPhone7plus:(設備像素比:3),(設備獨立像素:414x736),(狀態欄高:20px),(導航欄高:44px),(標籤欄高:49px)
iPhone8plus:(設備像素比:3),(設備獨立像素:414x736),(狀態欄高:20px),(導航欄高:44px),(標籤欄高:49px)
iPhonex:(設備像素比:3),(設備獨立像素:375x812),(狀態欄高:44px),(導航欄高:44px),(標籤欄:49px),(虛擬Home:34px)
iPhonexs:(設備像素比:3),(設備獨立像素:375x812),(狀態欄高:44px),(導航欄高:44px),(標籤欄:49px),(虛擬Home:34px)
iPhonexr:(設備像素比:2),(設備獨立像素:414x896),(狀態欄高:44px),(導航欄高:44px),(標籤欄:49px),(虛擬Home:34px)
iPhonexsmax:(設備像素比:3),(設備獨立像素:414x896),(狀態欄高:44px),(導航欄高:44px),(標籤欄:49px),(虛擬Home:34px)

iphone手機模擬器尺寸:

手機端的網頁通常都是在微信內打開或其餘瀏覽器打開,或app內打開,你會發現你的網頁能呈現的區域是窗口高度減去導航欄高度的。

這樣子的話,咱們在pc端進行佈局調試的時候,應該使用正確的手機模擬器尺寸

iPhone4:(設備像素比:2),(設備獨立像素:320x416)
iPhone5:(設備像素比:2),(設備獨立像素:320x504)
iPhone678:(設備像素比:2),(設備獨立像素:375x603)
iPhone678plus:(設備像素比:3),(設備獨立像素:414x672)
iPhonex xs:(設備像素比:3),(設備獨立像素:375x724)
iPhonexr:(設備像素比:2),(設備獨立像素:414x808)
iPhonexsmax:(設備像素比:3),(設備獨立像素:414x808)

 

待續。。

相關文章
相關標籤/搜索