iPadでレイアウトが崩れる

WordPressでサイトを構築していて、他のブラウザーでは問題が起きないのに、iPadでだけレイアウトが崩れるという現象が起きた。

メインのコラムに右にメニューを置くタイプのレイアウト。他のすべてのブラウザーで想定通りに表示されるのに、iPadだけはメニューが右の位置に入らず、メインのコラムの下に来てしまう。

CSSのwidth、paddingやmarginの設定の問題かと思ってチェックしてみたけど、どうも違う。

相当時間がかかったけど、問題は Viewport の設定であることが判明

このタグをコメントアウトしたら正常に表示された。
横幅が広くないサイトでは問題は起きていない。
仮説だけど、iPadのViewportは980pxであり、1000px超す場合は上記の指定ではおかしくなるということだろうか。

iPadに対する最適化まで余裕が持てないので、とりあえず、上記タグの無効化でよしとしておく。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です