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を指定すれば、あとはブラウザが勝手に綺麗に表示させてくれます。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

SPAM防止のため数字と漢数字の算数の計算をお願いします。 * Time limit is exhausted. Please reload CAPTCHA.