ここに問題のセットアップのデモがあります: http://chevasdesign.com/storage/index.php
ビューポートは現在、スケーリング属性なしで設定されています (これがあると、ページが横向きと縦向きの間でスケーリングできなくなるため)
<meta name="viewport" content="width=device-width" />
CSS の最後に、CSS に次のメディア クエリがあります。
@media only screen and (max-device-width: 480px) {
#wide { width: 440px; }
}
#wide幅 920px、左右 20px のマージン、グレーの背景です。それはたまたま唯一の要素です。
iPhone4 (私の場合) でページを縦向きまたは横向きで読み込むと、div は水平スクロールを必要とする画面の幅を超えて水平方向に広がります。画像を参照してください: http://chevasdesign.com/storage/viewport-media-queries-problem.png )。
iPhone は、幅 480 ピクセル未満のものが画面に収まるようにページを拡大縮小するべきではありませんか?
メディア クエリ内で幅 280 ピクセルに設定#wideすると (余白を含めて合計 320 ピクセル)、メディア クエリのデバイス幅が 480 ピクセルに設定されていても、div が画面に収まります。私は何が欠けていますか？
私にとって奇妙なのは、WordPress の本格的な Web サイトで正確なビューポート設定とメディア クエリ設定があり、すべてのメディア クエリが意図したとおりに機能していることです。