iPadで美しく表示するWebサイト最適化

自分の他のサイトをiPadのサイズにあわせようと、横幅を狭くしたのですが左右に大きな空間が出来てしまった。
iPadの画面サイズは、横768px × 縦1024px なので、横幅を730px位にしておけば良いかと思ったんだけど、そんな単純じゃないらしい。
調べた所、iPhoneiPadは擬似的に横幅980pxで表示するらしい。
だから、横幅を狭めただけでは左右に空白ができてしまう。 ただ、解決策はあるようで、

<meta name="viewport" content="width=768">

とheadに入れておけば画面の横幅を定義出来るらしい。 viewportをiPadの横幅768で指定すれば、 等倍でキレイに表示されるのだ。
その上でCSSで横幅を730pxとかに指定すると美しく表示された。
ちなみに、iPad向けにサイトを作るなら、ボタンやリンクはタップしやすい大きさに調整する必要がありそうです。

スポンサーリンク
レクタングル大
レクタングル大

コメントをどうぞ

メールアドレスが公開されることはありません。