方案一:(原創)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)
待續。。