美文网首页
移动端dpr

移动端dpr

作者: SherrinfordL | 来源:发表于2019-04-24 17:03 被阅读0次

例子:

@media (-webkit-min-device-pixel-ratio:2),(min-device-pixel-ratio:2){
    .border-1px{
        &::after{
            -webkit-transform: scaleY(0.5);
            transform: scaleY(0.5);
        }
    }
}

在javascript中,可以通过window.devicePixelRatio获取到当前设备的dpr。
在css中,可以通过-webkit-device-pixel-ratio,-webkit-min-device-pixel-ratio和 -webkit-max-device-pixel-ratio进行媒体查询,对不同dpr的设备,做一些样式适配(这里只针对webkit内核的浏览器和webview)。

网页一般dpr为1
Iphone5-6的dpr为2
特殊点da大的dpr为3

-webkit-min-device-pixel-ratio为1.0
所有非Retina的Mac
所有非Retina的iOS设备
Acer Iconia A500
Samsung Galaxy Tab 10.1
Samsung Galaxy S

-webkit-min-device-pixel-ratio为1.3
Google Nexus 7

-webkit-min-device-pixel-ratio为1.5
Google Nexus S
Samsung Galaxy S II
HTC Desire
HTC Desire HD
HTC Incredible S
HTC Velocity
HTC Sensation

-webkit-min-device-pixel-ratio为2.0
iPhone 4
iPhone 4S
iPhone 5
iPad (3rd generation)
iPad 4
所有Retina displays 的MAC
Google Galaxy Nexus
Google Nexus 4
Google Nexus 10
Samsung Galaxy S III
Samsung Galaxy Note II
Sony Xperia S
HTC One X

相关文章

  • 移动端dpr

    例子: 在javascript中,可以通过window.devicePixelRatio获取到当前设备的dpr。在...

  • 移动端部分(持续更新中)

    1.dpr 移动端设备像素比 设备像素比DPR(devicePixelRatio)是默认缩放为100%的情况下,设...

  • 移动端1像素的问题

    移动端1像素的问题 问题:一般在移动端,由于dpr(设备像素比)不为1,在PC端显示1像素的边框,在移动端其实显示...

  • 移动端适配方案

    移动端适配方案:1)viewport(scale=1/dpr)2)rem3)flex4)vm/vh一、什么是移动端...

  • 移动端适配

    移动端适配 dpr、DPI、PPI 视口 移动端适配的方案 微信小程序适配方案 微信小程序开发

  • 移动端适配- dpr浅析

    在上一片文章里,关于如何使用rem进行布局,我作了一个大概的描述。今天这篇文字,主要说一个东西-dpr。 我们都知...

  • 移动端 1px

    因为移动端设备 dpr (物理像素)的缘故,导致 1px 在移动端会变成 2px 的情况,可以通过 伪类 + 缩放...

  • 移动端H5项目判断使用几倍图

    移动端开发过程中,因为手机的dpr(设备像素比不同),需要根据dpr来修改图标的大小,判断使用@2x 图 还是 @...

  • 移动端自适应处理--dpr

    可伸缩布局方案---这个只是手淘的一个插件移动端高清多屏适配方案---主要参考的是这个 概念阐述: 1.物理像素(...

  • 移动端根据dpr适配不同图片

    以vue中使用stylus为例 mixin.stylus 同样的,在需要根据dpi适配不同图片的地方引入这段代码,...

网友评论

      本文标题:移动端dpr

      本文链接:https://www.haomeiwen.com/subject/bvaggqtx.html