【CSS】CSS meida查询在同一分辨率不同设备下查询结果不同的问题

1，我针对屏幕分辨率大于1920px的屏幕写了一个media查询

@media only screen and (min-width: 1920px) {
    // 样式代码省略
}

结果发现在不同屏幕，屏幕分辨率相同下，CSS查询的结果不同：
一台笔记本：1920x1080，media查询结果为真
一台大屏幕的显示器：1920x1080，media没有查询到。

有哪位知道，造成这种情况的原因是什么？是我使用的这个媒体查询功能min-width有问题吗？

回答：

推测
楼主笔记本用了win10
楼主为了解决字体发虚的问题，调整过 设置自定义缩放级别

回答：

我的电脑显示是分辨率是1920*1080但是文本等大小是125%
所以分辨率并不是1920
也有可能是浏览器放大了
图片描述

回答：

你可以打印一下 他的屏幕是多大不就好了吗

回答：

我觉得这个是我自己坑了下自己，我把media查询的界限写的太死了。改成下面这样就成功了：

@media only screen and (min-width: 1902px) { // 这里其实写1903也可以，但我不放心
    // 样式代码省略
}

media查询width时，查询的是可视窗口的宽度，而这个可视窗口在不同系统下同一浏览器貌似是不同的，测试了下，mac下的chrome，window.innerWidth和document.body.clientWidth是相等的，在win7下的某个版本下的chrome（没查具体是哪个版本），window.innerWidth - document.body.clientWidth = 17，在win10下也是17，但是不知道为什么win7下media查询成功了，而win10下没成功。

参考：
innerWidth
媒体类型
各浏览器滚动条宽度是多少

以上是 【CSS】CSS meida查询在同一分辨率不同设备下查询结果不同的问题 的全部内容， 来源链接： utcz.com/a/154353.html

回到顶部