web-dev-qa-db-ja.com

Chromeで高解像度の画面をシミュレートしますか？

XGA画面にワイドスクリーンワイドウェブサイトを表示するにはどうすればよいですか（1024px）in Chrome 26（Windows XP）。もちろん、Chromeでズームアウトできますが、それでも< 1220pxメディアクエリが起動します、残念です！だから私はnot get >= 1220pxWebサイトのバージョン。

私に何ができる？

Firefoxでは機能します。ズームアウトしてから>= 1220pxメディアクエリが起動します。しかし、私がWebサイトもテストしたいのはChromeではありません。

テストWebページのソースコード：

<!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>
windows-xpfirefoxgoogle-chromebrowserhtml
6
feklee

Chrome 28の場合、十分にズームアウトすると、最終的にはより大きな画面に対するメディアクエリが発生します。問題は解決しました。

1
feklee

完全を期すために、Chromeの開発者ツールを使用すると、正確な画面解像度を指定することでデバイスメトリックを上書きできることを述べておきます。スクリーンショットでは、追加のオプションが選択されています：ウィンドウに収まる

少なくともChrome 26では、ただし、デバイスメトリックを変更してもメディアクエリには影響しません（もう？）。したがって、この記事の執筆時点では、これは解決策ではありません。

Screen shot

7
feklee

1つの解決策は、ブラウザウィンドウの解像度を変更できるchrome拡張機能（ https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal ））です。画面の解像度よりも大きくなります。

2
Marcus Chan