我想在等离子屏幕上测试一个网站。此屏幕宽 55 英寸，但分辨率为 1024x768。因此，出于测试目的，我将笔记本电脑的分辨率从 1600x936 更改为 1024x768，并且正在测试的站点显示了相同的结果。
我希望能够通过媒体查询定位这个 1024x768 屏幕分辨率（不是设备宽度或最大或最小宽度）。
有人可以帮我解决这个问题吗？同样，我的笔记本电脑是 17 英寸宽屏，默认显示为 1600x960。我想测试一个 1024x768 分辨率的响应式设计网站。为此需要适当的媒体查询。
【问题讨论】：
标签： css responsive-design media-queries
我想这可能是你想要的：http://www.broken-links.com/2012/07/13/using-media-queries-to-test-device-resolution/
编辑：
我不认为这是重复的，因为它需要针对分辨率，而不是设备大小。
不管怎样，点击上面的链接可以对这个问题进行完整的分析，但基本上，我会在这里转述。
您可以使用 devicePixelRatio 属性来找出您当前设备的 DPR；不幸的是，由于某种原因它在 Firefox 中不受支持，但在所有其他主要浏览器中都支持：
console.log(window.devicePixelRatio);
一旦您有了 DPR（我将在本文中使用 1.5 作为任意数字），您就可以开始在您的媒体查询逻辑中使用它。
@media (-webkit-min-device-pixel-ratio: 1.5) {}
在所有这些情况下，您需要在主要浏览器中测试设备分辨率的最少媒体功能数量为两个：
@media (min-resolution: 144dpi), (-webkit-min-device-pixel-ratio: 1.5) {}
【讨论】：