ウィンドウサイズによってスタイルシートを変える

エ・ビスコム・テック・ラボ
2010-03-02 08:00:00
  • このエントリーをはてなブックマークに追加

iPhoneでの表示

 iPhoneやiPod touchに搭載されたSafariもCSS3の@mediaの指定に対応している。iPhoneの画面サイズは320×480ピクセルなので、さきほどのサンプルを表示したら1段組みになってほしいところだ。しかし、1段組みではなく2段組みの表示になってしまう。

iPhoneやiPod touchのSafariでサンプルを表示したもの iPhoneやiPod touchのSafariでサンプルを表示したもの

 こうした表示になるのは、iPhoneに搭載されたSafariがウィンドウの横幅を980ピクセルとして処理するためだ。現在のウェブページの多くは800ピクセル前後の横幅を基準にデザインされているので、この設定によってページ全体が画面に収まるように表示される仕組みとなっている。

 そのため、サンプルのように小さな画面用のスタイルシートを用意しても適用されず、大きな画面用のスタイルシートで表示されるという問題が発生する。

 そこで、iPhoneではを利用してSafariのウィンドウの横幅を何ピクセルとして処理するかを指定できるようになっている。たとえば、横幅を600ピクセルとして処理させたい場合には次のように指定する。


 サンプルにこの指定を追加して表示すると、ウィンドウの横幅が639ピクセル以下と認識され、1段組みのスタイルシートが適用されるようになる。小さな画面用のスタイルシートを用意して、iPhoneやiPod touchでの閲覧も考慮する場合には忘れずに記述しておきたい設定だ。

<meta />の指定を追加してサンプルを表示したもの の指定を追加してサンプルを表示したもの
ブラウザで表示を確認する

 なお、このの指定はiPhoneやiPod touchで機能するもので、パソコンなどの表示には影響しない。

@mediaの記述形式

このサイトでは、利用状況の把握や広告配信などのために、Cookieなどを使用してアクセスデータを取得・利用しています。 これ以降ページを遷移した場合、Cookieなどの設定や使用に同意したことになります。
Cookieなどの設定や使用の詳細、オプトアウトについては詳細をご覧ください。
[ 閉じる ]