kawama.jp

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

カテゴリ: スマホ・android — タグ: — 2013年7月4日 22:02 — Comments (0)hatebu count

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」を指定するだけでOKです。

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

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

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

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

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

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

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

コメントはまだありません »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment

Copyright (C) 2002 - 2017 kawama All Rights Reserved. — Powered by WordPress