如何通过媒体查询定位 1024x768 分辨率？ [复制]

Posted 2023-03-06

【中文标题】如何通过媒体查询定位 1024x768 分辨率？ [复制]

【英文标题】：How to target 1024x768 resolution through media queries? [duplicate]

【发布时间】：2014-08-20 05:55:16

【问题描述】：

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

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

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

【问题讨论】：

您是否在 Google 上搜索过媒体查询？ What have you tried?

【参考方案1】：

我想这可能是你想要的：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) 

【讨论】：

虽然这可能会回答问题，但最好在此处提供实际信息而不仅仅是链接。 Link-only answers are not considered good answers and will probably be deleted.

添加了该站点的一些信息，但实际上，这是一种复杂的事情，完整阅读可能最适合登陆这里的人。另外，我不认为这是重复的，因为它处理的是屏幕分辨率，而不是窗口大小（作者称之为“屏幕大小”）