iPadで美しく表示するWebサイト最適化
自分の他のサイトをiPadのサイズにあわせようと、横幅を狭くしたのですが左右に大きな空間が出来てしまった。
iPadの画面サイズは、横768px × 縦1024px なので、横幅を730px位にしておけば良いかと思ったんだけど、そんな単純じゃないらしい。
調べた所、iPhoneとiPadは擬似的に横幅980pxで表示するらしい。
だから、横幅を狭めただけでは左右に空白ができてしまう。
ただ、解決策はあるようで、
<meta name="viewport" content="width=768">
とheadに入れておけば画面の横幅を定義出来るらしい。
viewportをiPadの横幅768で指定すれば、
等倍でキレイに表示されるのだ。
その上でCSSで横幅を730pxとかに指定すると美しく表示された。
ちなみに、iPad向けにサイトを作るなら、ボタンやリンクはタップしやすい大きさに調整する必要がありそうです。
▼デザイニング・ウェブナビゲーション ―最適なユーザーエクスペリエンスの設計
▼ TUNEWEAR iPad用レザーケース TUNEFOLIO for iPad オレンジ TUN-PD-000008
他の投稿
他の投稿を読む
- 前の投稿：Apple Wireless Keybord の接続が切れる原因
- 次の投稿：iPadのアンチグレアフィルムが目に優しい
- 同じカテゴリの一覧：iPad
- トップページに戻る
投稿日：2010年8月4日(水) 12時22分
コメント