2010年7月15日

iPhone 4 の CSS を切り替える方法

iPhone 4とiPhone 3G/3GSとで、スタイルシートを切り換える方法を考えてみました。

iPhone 4のディスプレイ解像度は従来機と比べて縦横それぞれ2倍になりましたが、iPhone 4のSafariではviewportを従来どおり「width=device-width」と指定しても、320×480ピクセルの画面を2倍に拡大して表示されるため、ディスプレイ解像度の違いを考慮しなくても、従来と同様に表示できます。

しかし、これでは画像にジャギーが発生してしまうので、iPhone 4を区別できないかと色々探っていたところ、JavaScript(DOM?)に「window.devicePixelRatio」というものがありました。直訳すると「機器画素比率」でしょうか。

さらにウェブを検索してみると、「-webkit-device-pixel-ratio-webkit-min-device-pixel-ratio, -webkit-max-device-pixel-ratio)」というSafari(webkit)独自のCSSメディアクエリもあるようです。

というわけで、これらを使って、iPhone 4を表示を切り換える方法を考えてみました。

CSS


まずはスタイルシートから。

iPhone用に切り換えるには「(max-device-width:480px)」で可能ですが、iPhone 4を判別するため次のように「(-webkit-device-pixel-ratio: n)」を追加します。

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px) and (-webkit-device-pixel-ratio: 1)" href="iphone3g3gs.css">
<link rel="stylesheet" type="text/css" media="only screen and (max-device-width:480px) and (-webkit-device-pixel-ratio: 2)" href="iphone4.css">
<link rel="stylesheet" type="text/css" media="screen and (min-device-width: 481px)" href="macpc.css">

もしくは、CSS内部に記述する場合は次のとおりです。

@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) {
 /*iPhone 3G/3GS向けCSS*/
}
@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) {
 /*iPhone 4向けCSS*/
}
@media screen and (min-device-width: 481px) {
 /*Mac/PC向けCSS*/
}

追記:前記の例では、「-webkit-device-pixel-ratio」が「1」か「2」以外のiPhoneが登場した場合は、いずれのCSSも適用されません。そのような場合にも対応させる場合は、「-webkit-device-pixel-ratio: 1」を「-webkit-max-device-pixel-ratio: 1」に、「-webkit-device-pixel-ratio: 2」を「-webkit-min-device-pixel-ratio: 2」に変更します。

で、実際に試してみた結果です。

▲iPod touch 2G (OS 3.1.3)

▲iPhone 4 (iOS 4.0) 

▲Mac OS X (Safari 5.0)


サンプルHTMLはこんな感じです。

<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<style>
body {
 padding: 0;
 margin: 0;
}

ul {
 margin: 0;
 padding: 0;
}

li {
 font: normal 20px/1em Helvetica, sasn-serif;
 padding: 10px 10px 13px 10px;
 border-bottom: solid 1px rgb(217,217,217);
}

@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 1) {
 .iphone3g3gs {font-weight: bold;}
}
@media only screen and (max-device-width: 480px) and (-webkit-device-pixel-ratio: 2) {
 .iphone4 {font-weight: bold;}
}
@media screen and (min-device-width: 481px) {
 .macpc {font-weight: bold;}
}
</style>
</head>
<body>

<ul>
<li class="iphone3g3gs">iPhone 3G/3GS</li>
<li class="iphone4">iPhone 4</li>
<li class="macpc">Mac/PC</li>
</ul>

</body>
</html>

viewport


それから、詳しくは検証していませんが、次のようにJavaScriptでiPhone 4のviewportを変更できるようです。

<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no" id="viewport">
<script>
if (typeof window.devicePixelRatio == 'number' && window.devicePixelRatio > 1) document.getElementById('viewport').content = 'width=' + Math.round(screen.width * window.devicePixelRatio) + ',user-scalable=no';
</script>

0 件のコメント: