「viewport」タグアーカイブ

iPhone3のSafariは自動で980pxを320pxに縮小します。

スマートフォン向けのサイトでは、画面の横幅が小さいため、PC向けのものよりも、横に表示する情報を少なくすることがあります。
iPhone3GS等(iPod)のディスプレイの横幅が320pxです。デフォルトでは980pxを1/3の320に縮小して表示するので、600px程度のコンテンツでは、画面の2/3程になり、ずいぶん小さい表示になってしまいます。

解決にはメタタグでviewportの設定を行います。

<meta name="viewport" content="width=640, ">

と指定すると、640pxを画面いっぱいに表示するようになります。

スマートフォンは画面を回転させることがあるので、PCの用に「とりあえず1000pxくらいならよさそう」というように決め打ちできませんが、viewportを指定すれば、あとはブラウザが勝手に綺麗に表示させてくれます。