Viewportを利用して、Windows PhoneのIE Mobileのブラウズ体験を変える

Windows Phoneに搭載されているInternet Explorer MobileはViewportに対応しています。
皆さんのWebサイトにも、1行のmetaタグを追加していただけませんか。

<meta name="Viewport" content="width=device-width" />

このブログにはすでにこのタグを設定しています。

設定前と後の比較を画像で紹介します。

Viewport設定なし

Viewport設定あり

Comments

• Anonymous
  November 05, 2011
  viewport設定しない方が良いように見えますが、大丈夫でしょうか？
• Anonymous
  November 13, 2011
  コメントありがとうございます。どのようにサイトを見せたいか、に依存すると思います。何も指定しないと、幅1,024ピクセルとしてレンダリングが行われます。大抵のサイトは、横幅1,024ピクセル以内でデザインされているので、サイト全体が縮小表示されます。ブログのように新着情報を早く見てもらうためには、全体の縮小表示よりも、ページトップが大きく表示されている方が、読者の視点で良いでしょう、という発想での紹介です。もちろん、Viewportの設定だけでは不十分で、スタイルの変更やら、スマートフォンへの最適化が必要ですが、こちらは、一般的に、すぐに対応できるものではありません。なので、Viewportだけでも仕掛けたらどうでしょう、という感じです。