それマグで!

知識はカップより、マグでゆっくり頂きます。 takuya_1stのブログ

習慣に早くから配慮した者は、 おそらく人生の実りも大きい。

携帯用スタイルシートを自動切替えをCSS media query を使って実現する

Opera Meeting Up 2010-11-07でDanielさんに教えて貰った。

CSS media query がCSS3で定義されている。

画面の width が640 以下なら携帯用表示にする。

なんてことが可能。いままで、カラム段落ち問題って言ってたのが、解決するんだよ。
なのに、Videoタグだとかそういうことに注目が言っちゃうのが悲しいよね。


細かいことは省いてコリスからサンプルを引用
[CSS]Media Queries(メディア クエリ)を使用したデバイスごとの指定方法のまとめ | コリス

iPad(縦長・横長)

<link rel="stylesheet" href="ipad.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)">

iPad(横長)

<link rel="stylesheet" href="ipad-landscape.css" 
media="only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape)">

簡単ですね。このコリスのページのブクマ数が少ないのは何でだろう。カラムの問題は解決したのに、まだCSSを切り分けるスクリプト使ってるんかなぁ。バッドノウハウで十分なのかなぁ。

広告を非表示にする