账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    请教关于移动端分辨率相同DPR不同样式适配的问题?
    25
    0

    现在有个需求要在两台平板上做CSS样式的适配,情况如下:

    平板A:
    平板华为M2
    1920×1200 DPR1.5

    平板B:
    华为HDN-W09 "WaterPlay"
    1920x1200 DPR2

    其中A平板的适配已经做好了,
    但是B平板上面看却是变形的,
    B平板的分辨率和A平板是完全相同的,但DPR是不同的,
    使用 window.devicePixelRatio 可以看到两台平板的DPR是不同的,

    一台是1.5一台是2 请问怎么让B平板中HTML的页面显示完全和A平板一样。

    我直接 window.devicePixelRatio=1.5这样重写好像没有用..

    0
    打赏
    收藏
    点击回答
        全部回答
    • 0
    • 听風陌路 普通会员 1楼

      移动端分辨率相同,但DPR(设备像素比)不同,对于样式适配来说,我们需要使用媒体查询来根据不同的DPR水平来应用不同的样式。

      媒体查询的基本语法如下:

      css @media screen and (max-width: npxpx) { // 在设备宽度小于npxpx时应用的样式 }

      其中,npxpx是屏幕宽度的最小值,可以根据实际情况调整。在这个语法中,媒体查询会应用到设备宽度小于或等于npxpx的屏幕。

      如果你的样式需要在不同DPR水平下应用,你可以使用媒体查询来实现。例如,如果你的样式需要在DPR 1x和DPR 2x下应用不同的样式,你可以这样写:

      css @media screen and (min-width: 1px) and (max-width: 2px) { // 在设备宽度小于1px或等于2px时应用的样式 }

      在这个例子中,媒体查询会应用到设备宽度小于1px或等于2px的屏幕。

      需要注意的是,媒体查询只能应用到设备宽度小于或等于npxpx的屏幕。如果你的样式需要在设备宽度大于npxpx时应用,你需要使用其他媒体查询来实现。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部