鍍金池/ 問答/HTML5  C  網(wǎng)絡(luò)安全/ CSS meida查詢在同一分辨率不同設(shè)備下查詢結(jié)果不同的問題

CSS meida查詢在同一分辨率不同設(shè)備下查詢結(jié)果不同的問題

1，我針對屏幕分辨率大于1920px的屏幕寫了一個media查詢

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

結(jié)果發(fā)現(xiàn)在不同屏幕，屏幕分辨率相同下，CSS查詢的結(jié)果不同：
一臺筆記本：1920x1080，media查詢結(jié)果為真
一臺大屏幕的顯示器：1920x1080，media沒有查詢到。

有哪位知道，造成這種情況的原因是什么？是我使用的這個媒體查詢功能min-width有問題嗎？

回答
編輯回答
笑浮塵

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

2017年9月2日 02:48
編輯回答
風(fēng)畔

我的電腦顯示是分辨率是1920*1080但是文本等大小是125%
所以分辨率并不是1920
也有可能是瀏覽器放大了
圖片描述

2017年12月23日 22:56
編輯回答
朽鹿

我覺得這個是我自己坑了下自己，我把media查詢的界限寫的太死了。改成下面這樣就成功了：

@media only screen and (min-width: 1902px) { // 這里其實寫1903也可以，但我不放心
    // 樣式代碼省略
}

media查詢width時，查詢的是可視窗口的寬度，而這個可視窗口在不同系統(tǒng)下同一瀏覽器貌似是不同的，測試了下，mac下的chrome，window.innerWidth和document.body.clientWidth是相等的，在win7下的某個版本下的chrome（沒查具體是哪個版本），window.innerWidth - document.body.clientWidth = 17，在win10下也是17，但是不知道為什么win7下media查詢成功了，而win10下沒成功。

參考：
innerWidth
媒體類型
各瀏覽器滾動條寬度是多少

2017年6月26日 11:58
編輯回答
喵小咪

推測
樓主筆記本用了win10
樓主為了解決字體發(fā)虛的問題，調(diào)整過 設(shè)置自定義縮放級別

2017年2月18日 14:42