XGA画面にワイドスクリーンワイドウェブサイトを表示するにはどうすればよいですか(1024px
)in Chrome 26(Windows XP)。もちろん、Chromeでズームアウトできますが、それでも< 1220px
メディアクエリが起動します、残念です!だから私はnot get >= 1220px
Webサイトのバージョン。
私に何ができる?
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>
Chrome 28の場合、十分にズームアウトすると、最終的にはより大きな画面に対するメディアクエリが発生します。問題は解決しました。
完全を期すために、Chromeの開発者ツールを使用すると、正確な画面解像度を指定することでデバイスメトリックを上書きできることを述べておきます。スクリーンショットでは、追加のオプションが選択されています:ウィンドウに収まる
少なくともChrome 26では、ただし、デバイスメトリックを変更してもメディアクエリには影響しません(もう?)。したがって、この記事の執筆時点では、これは解決策ではありません。
1つの解決策は、ブラウザウィンドウの解像度を変更できるchrome拡張機能( https://chrome.google.com/webstore/detail/resolution-test/idhfcdbheobinplaamokffboaccidbal ))です。画面の解像度よりも大きくなります。