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

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

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

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

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

阅读 4.1k
4 个回答

推测
楼主笔记本用了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
媒体类型
各浏览器滚动条宽度是多少

推荐问题
宣传栏