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 件のコメント:
コメントを投稿