- 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 条
- 全部回答
-
听風陌路 普通会员 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时应用,你需要使用其他媒体查询来实现。
- 扫一扫访问手机版
回答动态

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器更新之后。服务器里面有部分玩家要重新创建角色是怎么回事啊?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题函数计算不同地域的是不能用内网吧?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题ARMS可以创建多个应用嘛?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题在ARMS如何申请加入公测呀?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题前端小程序接入这个arms具体是如何接入监控的,这个init方法在哪里进行添加?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器刚到期,是不是就不能再导出存档了呢?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器的游戏版本不兼容 尝试更新怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器服务器升级以后 就链接不上了,怎么办?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器转移以后服务器进不去了,怎么解决?预计能赚取 0积分收益

- 神奇的四哥:发布了悬赏问题阿里云幻兽帕鲁服务器修改参数后游戏进入不了,是什么情况?预计能赚取 0积分收益
- 回到顶部
- 回到顶部
