CSSチームが運営するHTML5・CSS3情報サイト

HTML5 GOGO

ボーズ・オンラインストア

Baba

Media Queries については「第19回 HTML5とか勉強会」レポートの記事で少しご紹介していますが、
今回はもう少し詳しく解説させていただきます。

Media Queries(メディアクエリー)とは

Media Queries はCSS2のMedia typesの拡張です。

Media typesで指定できた「screen」「print」などのメディアの指定に加え、
「width」「height」「color」 などの特徴(media features)を指定することができるようになりました。

ちなみにMedia typesでは下記のような感じで印刷用のスタイルを適応させるときに重宝しましたが

</p>
<link rel="stylesheet" type="text/css" media="print" href="/css/print.css" />

Media Queries を使用することで出力デバイスのサイズによってスタイルを切り替えることができるため、
PCとスマートフォンの見た目を切り替えるためによく用いられています。

他のサイトでも散々紹介されていますが、
やはりHTML5GOGOでもスマートフォンに対してスタイルを適応させるサンプルをもとに解説していきたいと思います。

スマートフォン用のスタイルを適応させるサンプル

下記はスマートフォン用(主にiPhone用)のスタイルシートをlinkタグで読み込むサンプルです。

</p>
<link rel="stylesheet" href="smartphone.css" media="only screen and (max-device-width : 480px)">

CSS ファイルに書く場合は下記のようになります。

<br />
@media only screen and (max-device-width : 480px) {<br />
 #contents {<br />
  width:95%;<br />
 }<br />
}<br />

device-width

device-widthは「出力デバイスの横幅」の指定、
サンプルの場合はさらにmax接頭辞が付いているので
出力デバイスの横幅が480px以下の場合」という指定となります。

(min-device-width : pitchfork 2000 2004 singles rar 320px) and (max-device-width : 480px)
のように「出力デバイスの横幅が320px以上480px以下の場合」という指定も可能です。

device-widthはwidthとは違うため注意が必要です。

PCで例えるなら、device-widthはモニターの横幅
widthはブラウザの横幅というイメージです。

only

onlyという指定について解説されているサイトが少ない(解説する必要がない?)ようですが
「Media Queriesに対応していないレトロブラウザを除外」する指定ですので、
Media Queriesを使用する際は付けておいて問題ないと思います。

devicePixelRatioについて

「出力デバイスの横幅が480px以下っていう指定でスマートフォンに適応できるって言ってるけど、iPhone 4 って もっと解像度高かったのでは?」
と疑問に思ってしまいそうですが、確かにiPhone 4の解像度は「960px × 640px」です。

ですが、デバイスのサイズは「480px × 320px」で間違いありません。

かなりややこしいのですが、
スマートフォンには「画像1pxが実際のデバイス上で何pxとしてレンダリングされるか」を示すdevicePixelRatioという値があり、
iPhone 4はこの値が「2」になっているため デバイスサイズは「480px × 320px」ですが解像度は「960px × 640px」としてレンダリングされることとなります。

この値はwebkit系ブラウザであれば「-webkit-device-pixel-ratio」で指定できますので
下記のような指定でiPhone 3G/3GSとiPhone4を切り分けることができます。

</p>
<link rel="stylesheet" type="text/css" media="only screen and (-webkit-max-device-pixel-ratio:1.5)" href="/css/iphone3.css" />
<link rel="stylesheet" type="text/css" media="only screen and (-webkit-min-device-pixel-ratio:2)" href="/css/iphone4.css" />

もはや説明は無用だと思いますが、devicePixelRatioが1.5以下のときはiphone3.cssが、
devicePixelRatio以上のときはiphone4.cssがそれぞれ読み込まれることとなります。

iPhone 3G/3GS用の指定をdevicePixelRatioが1以下ではなく1.5以下にしたのは
Android端末にdevicePixelRatioが1.5のものがあるため、どちらかに含めたかったためです。

縦向き、横向きの指定について

スマートフォンで縦向き(ポートレート)表示時と横向き(ランドスケープ)表示時で
http://stevenspointweddingplanner.com/bp36-gay-asian-singles/
スタイルを分けたいとき、
「device-widthの指定で切り分ければ良いのでは?」
と思ってしまいますが、横向き表示時もdevice-widthの値は320pxのまま変わりません。

device-widthをモニターのサイズに例えましたが、
ページ閲覧時にモニターのサイズがころころ変わったりしないというイメージです。

iPadなら下記のように「orientation : portrait」と「orientation : landscape」で切り分けることができますが、
dating postcards by stamp box
iPhoneやAndroidでは指定できないようです。

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

どうしても指定する必要がある際は
Viewportの設定でwidthをdevice-widthに指定し、拡大表示できないようにすることで
なんとか対応可能ですが、拡大表示禁止にしてしまって良いのか検討が必要です。

<br />
<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no" /><br />

Media Queriesの使用時に注意しておくこと

「第19回 HTML5とか勉強会」レポートの記事でご紹介している内容ですが、
dating site for reluctant people
重要なことなので、再度確認のためご紹介します。

IE対応

Media QueriesはIE8以前には対応していないため、下記のようなスクリプトを読み込ませる必要があります。

http://code.google.com/p/css3-mediaqueries-js/
https://github.com/scottjehl/Respond

ファイル容量に注意

Media Queriesを使用して、PCサイトとスマートフォントサイトの見た目を切り替える際に
注意しておく必要があるのが、どちらも同じhtmlファイルを読み込んでいるということです。

PCサイトでは画像をたくさん使用しているところをスマートフォンサイトでは
display: none;で非表示にするとしても、その画像はスマートフォンでも読み込まれることとなります。

PCに比べ、CPUや回線速度に不安が残るスマートフォンでは画像を惜しみなく使ったPCサイトを
読み込むのは危険です。

しかしながら、1つのhtmlファイルでPCページとスマートフォンページを対応することが
できるのはかなり効率が良く、修正時の対応も早いので機会があれば、どんどん使用していきたいものです。

まとめ

  • Media QueriesはMedia typesの拡張でwidthなどの特徴を指定できるようになったもの
  • device-widthはモニターの横幅、widthはブラウザの横幅のイメージ
  • スマートフォンにはdevicePixelRatioという値がある
  • スマートフォンの縦向き、横向き時にスタイルを分けることは難しい
  • IE8以前はMedia Queriesに対応していない
  • PCページであまり画像を使用していない際はMedia Queriesを使用してスマートフォン用ページを構築すると効率が良い
Subscribe:
pagetop