AndroidとiPhone用のWebサイトを作る

生活チェックサービス「ChanTo.me」を開始しましたが、こういうサービスはモバイル端末への対応が必要という事で、iPhoneとAndroidへの対応を行いました。

さて、対応サイトを作るにはサイトの幅を狭くしてもデザインを崩れないようにすればいいかと思ったのですが、それだけではありませんでした。

AndroidとiPhoneのそれぞれのブラウザの特徴を書いておきます。

縦の横幅は320pxだが、スクロールバーが出ていると幅が狭くなる。(314pxだったかな。)
最初のアクセスした段階では、サイトのサイズをそのまま表示する。
縦と横を切り替えても、幅が広がるだけ。

iPhoneの場合

縦の横幅は320pxで、スクロールバーには影響されない。
最初のアクセスした段階では、勝手に縮小して表示するが、METAタグの指定で設定可能。
縦と横を切り替えた場合の表示サイズの操作は、METAタグの指定で設定可能。

当初は、縦だと幅は320px(程度)、横だと480px(程度)に自動的に変更されるようにしようと考えていました。

<meta name="viewport" content="width=320,user-scalable=0,maximum-scale=0.6667;" />

maximum-scale=0.6667の部分の設定はiPhoneに有効なのですが、この設定により縦と横を切り替えても文字サイズがほぼ変わらず、横幅だけが変わるようになりました。
Androidでは設定がなくても、縦横を切り替えると文字サイズは変わらず横幅だけが変わるので問題ありません。
また、user-scaleble=0の部分は、ブラウザ上でユーザが拡大縮小できなくする設定です。これはAndroidでもiPhoneでも有効でした。

さて、これで一安心だと思ったのですが、実はこれだとpx単位でサイズを決めていたblockタイプのタグのサイズが小さくなってしまうという問題が発生してしまいました。
ChanTo.meはカレンダーとマーク画像が命ですので、これが小さくなっては意味がありません。

そこで、仕方ないので、iPhoneの場合は、横向きの場合でも画面サイズを320pxとして拡大して表示されるようにしました。
その設定が以下です。

<meta name="viewport" content="width=320,user-scalable=0,initial-scale=1.0,maximum-scale=1.0;" />

本当はせっかくなので、Androidでも横にしたら拡大されるようにしたかったのですが、これは方法がわかりませんでした。

結局AndroidとiPhoneで表示が変わってしまいますが、なんとか対応サイトが完成しました。
AndroidとiPhoneでアクセスしてもらうと、勝手に対応サイトの表示になりますので、ぜひご利用ください。