CSS3 viewportでブログをWindows 8対応


Internet Explorer 10 on Windows 8のHTML5/CSS3新機能 (@IT)

リンク先は特集の3ページ目ですが、この特集ではWindows 8で標準装備されるブラウザ「Internet Explorer 10」の新機能がいろいろ解説されているので、Web界隈の人は読む価値があると思います。

で、今回注目したのはCSS3で実現するviewport機能。スマートフォン向けでよくmetaタグで指定するあれですね。そのWebコンテンツが本来表示されることを想定する画面サイズを指定するものです。現状ではベンダープレフィックスが付いた状態で以下のようにCSSに指定します。

/* for Windows 8 & IE10 */
@-ms-viewport {
    width:1024px;
}

特に重宝するのがMetro(とは今は呼ばないのは知ってますが…)モードのIE10での表示。viewportを指定していない状態ではこういう表示で、左右が大きく開いていますが、

ie10_viewport1

viewportを指定するとこうなり、画面サイズに合わせてコンテンツが拡大されるようになります。

ie10_viewport2

CSSにちょっと書き加えるだけなので、Windows 8対応としてお手軽に試してみてはいかがでしょうか。

コメントを残す

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

Time limit is exhausted. Please reload CAPTCHA.