一篇真正教會你開發移動端頁面的文章(二)

標籤：測量   像素   imu   iphone   等於   手機   對比   螢幕寬度   iphone6   

一篇真正教會你開發移動端頁面的文章(二)

psd圖：
現在移動端的設計圖一般以iphone5（640px）和iphone6（750px）為準，ps左下角放大到100%，看寬度是多少，就是以多少為準。本篇以iphone6（750px為準），其它尺寸道理一樣。psd原稿按照裝置像素來設計的。

iphone5理想視口像素：320*568
iphone5的裝置像素是：640*1136；
dpr=2

iphone6理想視口像素：375*667
iphone6的裝置像素是：750*1334；
dpr=2

dpr=裝置像素個數/理想css像素個數

window的全域屬性可以測試裝置比：devicePixelRatio

web開發基於布局視口，現在將布局視口的寬設定為理想視口的寬，width=device-width，
所以現在你眼裡的螢幕寬度對應的css像素是375*667；

執行個體一：
第一步
你測量了psd上一個正方形：200px*200px
你在代碼寫上了200*200px，開啟瀏覽器一看，傻眼了，比例明顯不對。

原因：psd原稿尺寸是按照裝置像素來設計的，我們按照phone6的尺寸，所以設計稿的尺寸是iphone6的裝置像素尺寸，是750*1334，而我們css中的樣式是基於布局視口計算的，由於頁面寫上了標籤
<mata name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable="no"/>
width=device-width這段代碼是讓布局視口等於理想視口，最終導致：布局視口是375*667px，
你寫的200*200是基於750*1334，
而你的css對應螢幕的是375*667；
所以不對；
解決：width:100px height:100px,就正常了

第二部：
根據上面，psd總寬750px,測元素寬200px,而我們真正做頁面基於布局視口，布局視口是375px，正好是設計稿的一半，所以應該將測得尺寸除以2，於是修改代碼：100px*100px,現在效果一樣了
但是，我們知道測得除以2,111除以2得55.5，電腦或手機沒辦法顯示不到1像素的像素值，電腦或手機將自動補全為1，顯示是56像素，這不是我們要的。

寫頁面的時候已經將布局視口=理想視口了
縮放比為1的dpr（devicePixelRatio）=裝置/理想(屏寬css，開發人員眼裡的css)

元素 裝置像素
問題：200*200 750*1334 設計稿

元素css 理想視口屏寬
100*100 375*667 iphone6
100*100 x 414*736 7plus 比例又不一致了，所以不能直接除以2

750/414=200/x x=200*(414/750) x=測*(裝置理想視口寬/psd寬)

所以：
不同的手機，布局視口（現在也等於理想視口也等於屏寬）不一樣，比例又不一致了，所以不能直接除以2。直接除以2不能在所有裝置顯示完好

於是：如果 布局視口尺寸==裝置像素尺寸，那麼測得尺寸可以直接用於開發頁面，其它的手機，只需要進行等比縮放就OK了
如果：我們改變了理想視口尺寸的話，也就改變了布局視口尺寸，==>測得即寫得；如何改變理想視口尺寸呢？如何讓理想等於裝置？
解答：縮放是縮小或放大css的過程，以iphone6為例，由於iphone6的dpr是2，當縮放比是1，
一個css像素尺寸對應2個裝置像素尺寸，
當將一個css像素縮小到原來一半，即原來的0.5倍，縮小倍數=裝置像素比的倒數；
解決：scale=1/window.devicePixelRatio 設定scale動態,保證布局永遠等於裝置
布局永遠等於裝置，就會出現測得即寫得；
width:200px height:200px

第三步：iphone5與iphone6對比效果，由於iphone5與iphone6的裝置像素不一致，ihpone6保持與設計圖一致，而iphone5不一致。效果偏差
解決：利用rem

一篇真正教會你開發移動端頁面的文章(二)