移动web开发DRP问题

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