ssig33.com

Web サイトの Windows8 対応(CSS編)

前提

みたいな時の話。簡単なコードを CSS に追記しておくだけで Windows 8 や Windows Phone 8 などでサイトを快適に閲覧出来るようになります。

以下のような感じ

@-ms-viewport{ width: device-width; } /* これは Windows 8 でスナップを使用した時に綺麗に表示するためのもの */

/* 
 * 以下は Windows Phone でサイトを快適に表示する為のもの。 iOS とかやりなれてる人は何のコードか分かるかと思います。
 * 上から順に
 * 1280x720 のデバイスで横持ち時、 800x480 デバイスで横持ち時、 1280x720 デバイスで縦持ち時、 800x480 デバイスで縦持ち時
 * にサイトをモバイル向けのサイズで表示する為のものです。
*/
@media screen and (max-width: 1280px){@-ms-viewport { width: 480px !important; }}
@media screen and (max-width: 800px) {@-ms-viewport { width: 480px !important; }}
@media screen and (max-width: 720px) {@-ms-viewport { width: 320px !important; }}
@media screen and (max-width: 480px) {@-ms-viewport { width: 320px !important; }}

これ以外にも touch イベントを使っている場合は MSPointer イベントに対応するみたいのが必要になります。

Windows Phone に限った話ではありませんが、単純に画面画素数でアレすると 1280x720 みたいな Windows デバイスに対してモバイルサイトが表示されてしまうみたいなことになるかもしれません。まあ Windows デバイスは最近のものは殆ど横 1368 あるんですが、 iPad などのように画面回転が出来るものがありその場合は横 768 になってしまうという問題があります。

これもまた Windows に限った話ではありませんがモバイルデバイスのディスプレイのスペックアップに従って viewport という仕組みにももはや無理が出ているような気がします。 CSS や JS 側からデバイスの液晶の物理的なサイズを取得する API が必要だと思う。

そんなこんなで Windows Phone 8S 買いました。結構いいです。感想とかあとで書く。

back to index of texts


Site Search

Update History of this content