iPhone用にサイトの幅と画面の幅を合わせるには

Last update 2011/12/20 08:51

iPhone4やiPhone4Sは、解像度が横980pxなので、左のようにPC用に作られたPCサイトを表示させると、このように小さな画面では読みにくい表示になるだけでなく、右横に隙間が表示されてしまいます。
たとえば、左のサイトはこのサイトですが、横幅が900pxで作成しているため、80px分の隙間が出来てしまっています。

ピッチイン・ピッチアウトで拡大表示できますが、いちいちめんどくさいですよね。
左の画像は拡大して横幅に合わせたところです。

色々試したんですけれど、widthを小さくしても、単に隙間が大きくなるだけで、ぴったり画面に合わせることは出来ません。
当サイトも含め、私の所有するサイトの訪問者も、iPhoneをはじめスマートフォンでのアクセスが20～30%ほどになってきたので、どうにかしないと。。。と思っていたのですが、そろそろ本腰を入れて修正してみようと、色々調べてみました。
iPhoneの解像度は横980pxですが、実際には320pxが最適らしく、スマートフォン用に作られたサイトは320pxで作られているようです。
ところが今述べたように、スタイルシート等でBODYの幅を320pxにしても単に隙間が出来るだけで、思っているような表示が出来ません。

左の画像は、画像の幅（上の青色の部分）320pxなのですが、右側に隙間が空いてしまっています。
これをどうにか拡大縮小しなくても、画像をぴったり画面の幅に表示されるようにしたいのですが・・・・。

よけいなお節介？なiPhoneのSafari

iPhoneではPCサイトも表示させるためか、指定していないと標準で980pxに縮小して表示されるようになっているようです。
まあ、おかげでiPhone表示に対応させていない当サイトでも、表示させられるわけですが・・・。

ところが実際のスクリーン解像度は、横320px、縦480px。
横向きにした場合、横480px、縦320pxになります。
Safariの場合、URLやツールバーがあるので横320px、縦356pxで表示(URLなどの部分を除いた範囲)させるとぴったりと画面に納めることが出来ます。

METAタグで指定してやる

<meta name="viewport" 

content="width=device-width,

 initial-scale=1,

 maximum-scale=1, 

 user-scalable=no" >

上のタグをHEAD内に記述してやると、このようにピタッと画面に最適な大きさで表示させることが出来ました。
文字も読みやすく大きくなりました。

width=○	横幅を指定した数値に合わせる device-widthを指定すると画面に合わせる
initial-scale=1	倍率。1を指定すると等倍
maximum-scale=1	倍率。最小。ここで指定した値の方が、上記より優先される
user-scalable=no	拡大・縮小できるようにするか

この中でも実際には、maximu-scaleが最優先されるようで、このmaximu-scaleを指定すると、拡大も縮小も出来なくなり、initial-scaleを指定してもmaximu-scaleの値になってしまうようです。
またmaximu-scaleを指定しないと、widthを指定しても有効にならないっぽいです。


maximum-scaleを0.5にしたところ	initial-scaleを2にしたところ

maximum-scaleを0.5にし initial-scaleを2にしたところ

320pxにするとはみ出す

さて、では、width=device-widthと指定し、幅320pxの画像を貼れば、画面にぴったりの画像を表示させることが出来るのでしょうか？
青の画像は、実際は300px。
よく見ると、青の画像の左右に隙間が出来ています。

青の画像の幅を320pxにすると、このようにスクロールしないと全体を表示できないようになりました。
では、実際には幅は、320pxではなくて300pxなのでしょうか？

<style type="text/css">

  <!--

    body {

    margin:0px;

    }

  -->

  </style>

この場合は、スタイルシートでBODYのmarginを0pxに指定しておくと、画像の両脇に隙間が出来ずに、幅を320pxにしたときに画面にぴったり納めることが出来ます。

左の画像は、スタイルシートでBODYのmarginを0pxで指定したものです。
青い画像の幅は320pxで指定。
その下の青い画像は、200pxで指定。
その下の写真は、300pxで幅を指定したところです。

なにも指定しなかったときに比べ、ずいぶんスマートフォンで見やすい表示に出来ることが出来ました。

拡大縮小は出来なくなりましたが、逆にスクロール時に左右にぶれないので、スクロールもしやすくなりました。

さて、同じサイトをPCで表示させるとどうなるのでしょうか。
左は、パソコンで表示させたところです。
meta name="viewport"
のタグは、パソコンのブラウザは無視してくれるため、iPhoneから見た場合のみ、サイトの幅を画面ぴったりに合わせてくれるように指定できるのです。

iPhone用にサイトの幅と画面の幅を合わせるには