☰

在 Chrome 中模拟高分辨率屏幕？

tag-icon • tag-icon windows-xp firefox google-chrome browser html
在 Chrome 中模拟高分辨率屏幕？

如何在 Windows XP 上的 Chrome 26 中在 XGA 屏幕上显示宽屏网站（1024px）。当然，我可以在 Chrome 中缩小，但< 1220px媒体查询仍然会触发，真糟糕！所以我这样做了不是获取>= 1220px网站的版本。

我能做些什么？

使用 Firefox 时，它可以工作：我缩小，然后>= 1220px媒体查询触发，太棒了！但它不是 Chrome，我也想在 Chrome 上测试网站。

测试网页源代码：

<!DOCTYPE html>

<html>
  <head>
    <meta charset=utf-8>
    <title>Test</title>
    <link rel="stylesheet" type="text/css" media="screen" href="index.css">
    <style>
      p {
          color: black;
      }

      @media (min-width: 1220px) {
          p {
              color: red;
          }
      }
    </style>
    <script>
      window.addEventListener("resize", function () {
          console.log(window.innerWidth);
      });
    </script>
  </head>

  <body>
    <p>Turns red for window width >= 1220px</p>
  </body>
</html>

答案1

为了完整起见，我想提一下，使用 Chrome 的开发者工具，设备指标可以通过指定精确的屏幕分辨率来覆盖。在屏幕截图中，选择了附加选项：适合窗口

不过，至少在 Chrome 26 中，设备指标不再影响媒体查询。因此，截至撰写本文时，这还不是一个解决方案。

截屏

答案2

一个解决方案是使用 Chrome 扩展程序（https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal) 可以将浏览器窗口分辨率更改为大于屏幕分辨率。

答案3

使用 Chrome 28，当缩小到一定程度时，最终会触发针对更大屏幕的媒体查询。问题解决了。

相关内容