Pad向け Web Pageデザインのための基本情報
iPad向けに Web ページを作成する場合、いくつか知っておかなければならない事があります。
User-AgentによるiPadの検出
まず、iPadと他のページを切り替えたりする場合、User-Agentを知っておく必要があります。
Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10
JavaScriptでも検出可能です。
function isIPad() {
return navigator.platform == "iPad";
}
画面のサイズと向き
iPad の画面サイズは、768x1024となっています。これは、向きを変えると変わるようにも思われますが、実は固定です。幅と高さの情報以外に、orientationという情報により向きを確認できます。
| JavaScript | 値 | 備考 |
|---|---|---|
| screen.width | 768 | iPadの向きに関係なく固定 |
| screen.height | 1024 | iPadの向きに関係なく固定 |
| window.orientation | 0 | iPad垂直時 (portrait) |
| 90 | 左へ90度回転させて水平にした時 (landscape) | |
| -90 | 右へ90度回転させて水平にした時 (landscape) | |
| orientationchange | 回転時のイベント |
HTML5
Doctype
HTML5からドキュメントタイプの指定が単純になりました。
<!DOCTYPE html>
Character Encoding
HTML5から文字コードセットの指定が単純になりました。
<meta charset="utf-8">
スタイルシート
垂直／水平と行った向きによってスタイルシートを変更する事が出来ます。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css"> <link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
ホーム画面のアイコンを指定出来ます。
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
Retina対応
iPhone, iPad さらには Macbook Pro まで、高解像度である Retina ディスプレーに対応しました。Retinaディスプレーは、幅と高さが２倍となったため面積が４倍になりました。
高解像度になったことで特に対応をしなくても問題は無いのですが、デバイスが高解像度になったことでより奇麗な画像を表示することが出来ます。
標準画像を Retinaディスプレーで表示すると荒くなってしまい奇麗に表示できません。また、高解像度の画像を標準ディスプレーで表示してもつぶれてしまい奇麗に表示できません。では、どのようにすれば標準と Retina ディスプレーで奇麗に表示することが出来るでしょうか？
CSS Media Queries を利用する
古いブラウザでは対応していませんが、最近のメジャーなブラウザーでは device-pixel-ratio と min-device-pixel-ratio、max-device-pixel-ratioによりデバイスの解像度の比率を判定できるようになっています。 例えば、300x200px の sample.png と 600x400px の sample@2x.png という画像を用意した場合、
.sample {
background-image: url(sample.png);
width: 300px;
height: 200px;
}
@media only screen and (-Webkit-min-device-pixel-ratio: 1.5),
only screen and (-moz-min-device-pixel-ratio: 1.5),
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
.sample {
background-image: url(sample@2x.png);
}
}
このサンプルで、比率が 2 ではなく 1.5 となっているのは Appleのデバイス以外にも対応させるためです。
Javascript を利用する
Javascriptを利用する場合、デバイスの解像度の比率を判定できる window.devicePixelRatio を利用します。CSSでひとつひとつ画像を設定していくよりは簡単に記述できます。ただし、JavaScript を利用するので HTMLの記述の仕方や量によっては描画が遅くなることがあります。
$(document).ready(function(){
if (window.devicePixelRatio > 1) {
var lowresImages = $('img');
images.each(function(i) {
var lowres = $(this).attr('src');
var highres = lowres.replace(".", "@2x.");
$(this).attr('src', highres);
});
}
});
また、window.devicePixelRatio は、IE や Firefox は対応していません。この場合、あくまでもスマートフォンやタブレットなどのモバイル端末の場合しか利用できません。
その他の手段
SVG を利用する方法：
<img src="sample.svg" width="300" height="200" />
Icon フォントを利用する方法：
<style>
@font-face {
font-family: "My Icon Font";
src: url('fonts/my-webfont.eot');
src: url('fonts/my-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/my-webfont.woff') format('woff'),
url('fonts/my-webfont.ttf') format('truetype'),
url('fonts/my-webfont.svg#myRegular') format('svg');
font-weight: normal;
font-style: normal;
}
.sample { font-family: 'My Icon Font';}
</style>
.....
<span class="sample">A</span>
などがあります。このほかにも Apple では -Webkit-image-set 拡張を考えてるようです。
.sample {
background-image: -Webkit-image-set(url(sample.png) 1x, url(sample@2x.png) 2x);
width: 300px;
height: 200px;
}
iPad 関連の情報
Swipe Sample
