iphone、androidの幅固定ページ用viewport設定

500ピクセル幅固定のページをiphone、androidで最適化表示するために色々調べ、試しました。

最終的に以下に落ち着きました。
できればiphoneもandroidも共通のviewportにしたかったんですが、無理っぽかったのでユーザーエージェントで分けました。

<?php if(preg_match("/Android/", $_SERVER["HTTP_USER_AGENT"])): ?>
  <meta name="viewport" content="target-densitydpi=device-dpi, width=500px, initial-scale=1.0, user-scalable=yes">
<?php else: ?>
  <meta name="viewport" content="width=500px">
<?php endif; ?>

iphoneは「width=500px」を指定するだけでＯＫです。

問題はandroidです。
「width=500px」だけだと、まず最初にブラウザデフォルトのサイズでページをレンダリングし、ページをすべて読み込んだ"後に"widthを500pxに変更する、という仕様になってるようです。

一回読み込んだ後変更するので、文字の改行位置が変わったりして、ページがカクカク動いてしまいます。

そこで登場するのが「target-densitydpi=device-dpi」。
このandroid独自の属性を指定することで、表示が最適化されます。


とりあえずこれで問題は解決。iphoneでもandroidでもビシっと表示がキマるようになりました。


とは言ってもやはりスマホページは固定幅は不向きです。特にandroidは変な動きが多いです。

ユーザビリティのことを考えても、スマホに最適化したページを作ったほうが、間違いなく良いです。


参考ページ
http://www.tasuhiku.com/tips/214