css - 如何在 Retina 屏幕上使用 CSS 媒体查询

Question

我编写了以下未按预期运行的媒体查询。变化发生在 1537 像素而不是 1024 像素。我正在使用 Retina 屏幕，此代码包含在使用 create-react-app 3 引导的项目中的 SCSS 文件中。

我做了一些研究，发现我的设备像素比是 3。这会影响我编写媒体查询的方式吗？

我的 CSS：

&--info-container {

  border: 5px solid red;

  @media (max-width: 1024px) {
    border: 5px solid green; 
  }

}

在我的 index.html 中：

 <meta name="viewport" content="width=device-width, initial-scale=1" />

非常感谢！！

score 0 · Accepted Answer

原来我的浏览器被放大到 150%。没想到要检查！！缩小到 100% 为我解决了这个问题。

score 0 · Accepted Answer

您是否要针对 iPad？设备像素和 CSS 像素是不同的。

以下是您可能会发现有用的快速参考：http: //iosres.com/

2 回答 2