スマートフォン用に最適化サイトを作る最小マークアップ
<!DOCTYPE html>
<html lang=”ja”>
<head>
<meta charset=”utf-8″ />
<title></title>
<meta name=”robots” content=”ALL” />
<meta name=”description” content=”” />
<meta name=”keywords” content=”” />
<?php
if (preg_match(‘/Android/’, $_SERVER[‘HTTP_USER_AGENT’])) {
// Android用
echo (‘<meta name=”viewport” content=”target-densitydpi=device-dpi, initial-scale=1,minimum-scale=1,maximum-scale=1″ />‘);
}
else {
echo (‘<meta name=”viewport” content=”width=device-width, user-scalable=no, initial-scale=1, minimum-scale=1,maximum-scale=1″ />
‘);
}
?>
<meta name=”format-detection” content=”telephone=no” />
<link rel=”apple-touch-icon-precomposed” href=”apple-touch-icon.png” />
<script type=”application/javascript”>
function doScroll(){
if(window.pageYOffset === 0){
window.scrollTo(0,1); }
}
window.onload = function(){
setTimeout(doScroll, 100);}
</script>
</head>
<body>
</body>
</html>
Androidでのviewport指定
Androidでは、viewportの「width」が効かないため、「target-densitydpi」を使用します。
「target-densitydpi」はAndroid2.0以上で利用でき、表示時のdpi(dots per inch/1インチの中に何ドット表示するか)を指定できます。
ただし、Android用のviewportでwidthが指定されているととうまく動作しないため、UserAgentでiPhone用とAndroid用のviewportを分岐したのが上記のコードです。
(他にもっといい方法があるかも知れません。)
アドレスバーを非表示にする
javacscriptのソースは、画面読込時にアドレスバーを非表示にするものです。
ホームアイコン
<link rel=”apple-touch-icon-precomposed” href=”apple-touch-icon.png”>は、ホーム画面に追加するためのアイコンを設定するもので、iphone4に最適化するには114×114pxで作成します。
ズーム設定について
「user-scalable」は、ズームを禁止するかどうかを制御しますが、これがyesになっていると、フォーム入力後等、ズーム後の画面表示サイズがおかしくなってしまうことがあるため、noに指定することが多いです。
縦横切替時の文字サイズ調整
スマートフォンでは、横向きにすると縦の時より自動的に文字サイズが大きくなります。
初期値は自動調整になっているので、これを止めるには、cssでbodyタグに以下のように記述します。
body {
-webkit-text-size-adjust: none;
}
2012/2/4追記
Androidでは、widthの代わりにtarget-densitydpiを指定すべきと書きましたが…、
何故か、Androidでは、widthとtarget-densitydpiのどちらも指定しないほうが正常に表示されるケースもあり、何が原因か詰めているところです。
こういう現象で悩まされるのは、iPhone4等のretinaディスプレイを意識して、画像パーツを2倍の解像度で作成する場合に起こるものなので、画像パーツの画質を気にしないのであれば問題は無いですが。
2012/2/15追記
Androidでは、viewportの「width」が効かないはずですが、
widthを記述しないと正常に動作しない一部のjQueryライブラリが存在。
Androidは謎の仕様が多すぎです。
それよりも謎なのは、なぜiPhoneを選択せずにAndroidを選択する人間がこんなにもいるのかということに尽きるでしょう。
