私は非常に狭い場合、CSSのメディアクエリを使用して私のページの外観を調整しています。簡略化した例では、ページの幅が300ピクセル未満の場合は、背景を青くします。最大幅のCSSメディアクエリはどのようにズームに対応できますか?
@media all and (max-width: 300px) {
body{ background-color:blue;}
}
私は最近、ユーザーズーム(Ctrlキー+スクロールホイールやChromeレンチ>ズームの)場合は、最大幅は依然として300個の実際のピクセルではなく、300個のズーム画素の中にキックすることをことを発見しました。これにより、より洗練されたレイアウトのサイトが壊れる可能性があります。ズーム幅の広いブラウザを使用しているユーザを処理する最大幅のメディアクエリはありますか?
ブラウザはこれを実装する必要があります(これはFirefoxと同じです)。私はJSを使っていることを除いて、あなた自身がこれをやる方法はないと思います。柔軟なレイアウトを使用してください。あなたが望むよりも少し窮屈になると思っている人もいますが、サイトがまだ使えるものであれば... – Gerben
少し実験した後、ズーム時に "max-width:10em"を使うと動作します。しかし、これはクロムでは機能しません。 Firefoxはうまく動作する(他のブラウザではテストしていない)が、クロムの縫い目がバグアウトする。私はクロムについて何をすべきか分かりますか? – ntkachov