| ブログトップ | CSS関連 | HTML関連 |

viewportの設定に注意

この記事は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だろうが、第4世代のipod touchだろうが幅のサイズは320pxになります。(こう書くと誤解を生みそうな感じですが、もちろん画面の半分しか表示されないわけではなく、320pxのサイズのものが640pxに引き伸ばされて表示されるという感じになります。)

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

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

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

参考サイト:

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

【8月16日追記】「target-densitydpi=high-dpi」の場合、Andoroid タブレットなどで表示がおかしくなる可能性があります(※1)。「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との振り分け方がイマイチよくわからない・・・

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


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


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

 

参考サイト

日々の生活にhappyをプラスする|ハピタス

このエントリーをはてなブックマークに追加

LINEで送る

nandani | 2012年08月07日 | コメント(2) | トラックバック(0) | CSS関連 | HTML関連

トラックバック

トラックバックURL

コメント一覧

1. Posted by ossan03   2014年06月06日

こんにちは。

middle-dpiではなくmedium-dpiですね。

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

これがよくわからないのですが・・・。
iPhone4ならdevicepixelratioが2になっているので、content="width=device-width"でviewportを320にした時と同じ挙動をしますよ。それかviwportを設定せずにbody=320pxにしておくだけでも勝手に画面にぴったりで表示されますよ。

2. Posted by nandani   2014年09月24日

ossan03さん

>middle-dpiではなくmedium-dpiですね。
ほんまや。
失礼しました。

コメントする

※メールアドレスが公開されることはありません。

名前 *
メール*
URL
Copyright(c) 2010 - 2017 ダリの雑記