DPR

dpr問題是移動端web開發上需要注意的問題，用大白話說就是，代碼中所設置的像素值實際上是虛擬像素，手機屏幕上的像素實際為物理像素，原始的手機，虛擬像素與物理像素是1:1覆蓋的，但隨著移動端屏幕的技術發展，屏幕尺寸不變的情況下，密度卻增大了，就會出現邏輯1像素覆蓋了多個物理像素，就造成了不清晰的問題。
dpr（devicePixelRatio）就是即物理像素/邏輯像素
在美工切圖的時候需要切1倍、2倍、3倍圖，也是因為這個問題。而在移動web開發中，也需要根據不同屏幕做不同的處理，目的是盡可能讓邏輯像素與物理像素一一對應，這樣才能達到最清晰的狀態。

在js中可以獲取dpr的值

window.devicePixelRatio

在css中解決dpr問題應使用媒體查詢

border 1像素問題

css中設置的1px，是虛擬像素，在移動屏上，drp是1的情況下，邊框是正好1:1覆蓋的，但在大于1的情況下，比如iPhone 6s上的drp是2，css的1像素實際上在屏幕上要覆蓋兩倍的物理像素，于是看上去就比較粗，如果拿原生APP去比，web就明顯粗一些，就是因為實際在物理屏上覆蓋了2像素的高度。
解決這個問題的思路是，根據媒體查詢，在不同dpr下，利用transform中的縮放，將Y軸縮放一定比例，盡量使虛擬像素與物理像素吻合。比如dpr是1.5，則Y軸縮放0.7（因為沒辦法設0.75），2的情況下縮放0.5，3的情況下縮放0.3。

html

<div id="vTabs" class="vTabs border-1px"></div>

stylus

border-1px($color)position relative&::afterdisplay blockwidth 100%position absoluteleft 0bottom 0border-top 1px solid $colorcontent ' '@media (-webkit-min-device-pixel-ratio: 1.5),(min-device-pixel-ratio: 1.5).border-1px&::aftertransform scaleY(0.7)-webkit-transform scaleY(0.7)@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2).border-1px&::aftertransform scaleY(0.5)-webkit-transform scaleY(0.5)@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3).border-1px&::aftertransform scaleY(0.3)-webkit-transform scaleY(0.3).vTabswidth 100%height 40pxline-height 40pxbackground #ffffffdisplay flexborder-1px(rgba(7,17,27,0.1))

圖片適應

目前移動端屏的dpr基本都是2以上，我們一般考慮2和3的情況即可。
思路也是一樣的，利用媒體查詢不同屏幕上使用不同尺寸圖片，盡量使虛擬像素與物理像素吻合。
stylus mixin

background-img($url)background-image url($url+"@2x.png")@media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)background-image url($url+"@3x.png")

意思是，如果dpr大于等于3（3以上），則用3倍圖，否則均用2倍圖。當然這里要約定好圖片的命名。

css中應用

.icondisplay inline-blockvertical-align topwidth 30pxheight 18pxbackground-img('./img/brand')background-size 100% 100%background-repeat no-repeat

---

張鑫旭大神的dpr解釋：
http://www.zhangxinxu.com/wordpress/2012/08/window-devicepixelratio/

總結

以上是生活随笔為你收集整理的移动web开发DRP问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。