ダリの雑記：WEBプログラム版

この記事は1年以上前の記事のため、内容が古い可能性があります。

この記事は2012年に作成されたものです。内容が古くなっている可能性があります。

【2013/06/17追記】こちらの記事もあわせてどうぞ。
target-densitydpi=device-dpi　に注意【viewport】

スマホサイトを作る際は、viewportの設定を行なわないと、デフォルトの横幅980pxで設定してしまうので注意、とのことだったので、いろんなサイトが良く設定している

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

を設定してみました。

しかし、FirefoxのFireMobileSimulatorで一通り整えて、実記テストしてみたところ、おかしな点が出てくる出てくる。

まず、ズーム（ピンチイン・ピンチアウト）が効かない。

これは「minimum-scale」と「maximum-scale」と「user-scalable」をしっかり設定しないとダメみたいです。

「minimum-scale」はデフォルトのスケールである「initial-scale」にあわせればいいとして、「maximum-scale」は「minimum-scale」よりも大きい値にし、「user-scalable」は「yes」にします。

<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=2.0,user-scalable=yes" />

そもそも「minimum-scale」「maximum-scale」「user-scalable」は設定しない（記述しない）と言うのもありです。ちなみにこの設定は一部機種には全く効かない（つまりuser-scalableがnoでもズームできてしまう）場合があります。機種に依存してしまうので深く考えないほうがいいかもですね。

続いて、「device-width」の値。

iphone3Gは幅320pxですが、iphone4からは640pxになるはず。

しかし、「width=device-width」の設定ではiphone4だろうが4Sだろうが、第４世代のipod touchだろうが幅のサイズは320pxになります。（こう書くと誤解を生みそうな感じですが、もちろん画面の半分しか表示されないわけではなく、320pxのサイズのものが640pxに引き伸ばされて表示されるという感じになります。）

しかも、幅480あるはずのXperiaでさえ320pxになってしまう・・・

よくよく調べてみると、幅320pxでサイトを作れば、大体の機種に合うようにできているそうです（例外はもちろんありますが）

Androidケータイの場合は、１つの機種で解像度が３種類に分かれており、通常はミドルの解像度で表示されているとのこと。

参考サイト：

• Androidの「target-densitydpi」でviewportの調整[to-R]
• 解像度 - Jimdoでマルチ・デバイス対応のホームページ

幅のサイズをきっちり、機種の解像度に合わせたい場合は（ただしiphone除く）、さらに「target-densitydpi=high-dpi」を足しましょう。

【８月16日追記】「target-densitydpi=high-dpi」の場合、Andoroid タブレットなどで表示がおかしくなる可能性があります（※１）。「target-densitydpi=device-dpi」としたほうが良いようです。

<meta name="viewport" content="width=device-width,target-densitydpi=device-dpi,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />

通常はこの「target-densitydpi」は「medium-dpi」となっています。

（）書きでも触れましたが、これはAndroid向けなので、iphoneでは効きませんので注意！

「initial-scale」を0.5にしたりすると、640pxで表示されるようになるので、iphone4・4Sの場合は

<meta name="viewport" content="width=device-width,initial-scale=0.5,minimum-scale=0.5,maximum-scale=0.5,user-scalable=no" />

を記述する、というように振り分けられれば良いのですが、3Gとの振り分け方がイマイチよくわからない・・・

というわけで、現在まだまだ模索中です。

※１：具体的には短辺800pxのタブレットで表示した際、画面の３分の２くらいのサイズでしか表示されませんでした。（機種や設定などによるかもしれませんが。）

【2013/06/17追記】こちらの記事もあわせてどうぞ。
target-densitydpi=device-dpi　に注意【viewport】

参考サイト

• Android対応スマートフォンサイトのレイアウト（viewport・コンテナ編）
• iPhone 4 (Retina) での device-width は320 - [ぴ](2010-08-30)
• Androidの「target-densitydpi」でviewportの調整[to-R]
• 解像度 - Jimdoでマルチ・デバイス対応のホームページ
• スマートフォン用に最適化サイトを作る最小マークアップ | 風俗店サイト構築用CMS「CASTPRO4」