こんにちは。
職人見習いの櫛田です。
スマートフォンサイトをコーディングする際にまず悩むのが、コンテンツのサイズを何pxにするかとうこととiPhoneでもAndroidでも画面サイズに合った表示をしなくてはならず、Androidでは機種によっても変わってくるということです。
今回、コンテンツの幅は640pxで作成しております。
metaタグのviewportに下記のような設定をしてみたのですが、うまくいきませんでした。
この設定にさらに様々な指定を加えて調整してみたのですが、iPhoneでうまくいってもAndroidではうまく表示されなかったり、横向きの場合、画面サイズに合わなかったりとなかなかうまくいきませんでした。
そこで、下記のようにjavascriptでコンテンツサイズを制御するようにしました。
参考サイト：スマートフォンのサイトを横に回転させた時に画面のサイズに合わせて拡大させるには
これにより、iPhoneでもAndroidでも画面サイズに合った表示ができるようになりました。
横向きにした場合にも、幅が調整されて表示されており、iPadでも画面サイズに合わせて表示されました。
※この記事は、なかの人（KUSSY8077）が書いています。