Question

我想在等离子屏幕上测试一个网站。此屏幕宽55英寸，但分辨率为1024x768。因此，出于测试目的，我将笔记本电脑的分辨率从1600x936更改为1024x768，并且正在测试的网站显示相同的结果。

我希望能够通过媒体查询定位此1024x768屏幕分辨率（不是设备宽度或最大或最小宽度）。

有人可以帮我这个吗？我的笔记本电脑再次宽17英寸，默认显示为1600x960。我想测试一个网站，以获得1024x768分辨率的响应式设计。需要适当的媒体查询。

Answer 1

修改：

我不相信这是重复的，因为它处理需要定位分辨率，特别是设备尺寸。

无论如何，点击上面的链接可以对这个问题进行全面分析，但基本上，我会在这里解释一下。

您可以使用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) {}