スマートフォンのコーディングで気を付けたい4つのポイント
はじめに
現在、スマートフォンは大きく分けて2つのOS(iOS、Android)があります。
OSごとの仕様の違いも重要ですが、
特に問題になる端末の違いは画面の解像度で、
iOSは960×640px(iPhone4とiPhone3Gは同じサイズで表示できる)
Androidは800×480px?(端末によってサイズがバラバラだが、横幅は480pxが基本)
と、表示サイズが大きく異なります。
さらにスマートフォンは画面を横に回転させることもできるので、
解像度が縦横反対になることも想定しておかなければいけません。
iPhone4を基準としたデザインからコーディングをした場合の注意点とその参考サイトをまとめました。
iOSのSafariは様々な制限やバグがある
・画像のサイズ制限がある(GIF、PNG、TIFF画像のデコードサイズ制限は2メガピクセル)
・Web Fonts は使えない。
・zoomプロパティを使用した場合、特定の条件で文字が拡大するバグ
[参考サイト]
PhoneのSafariブラウザにおける、色んな制限|FINE lab.
http://lab.fine-net.com/modules/wordpress2/index.php?p=15
iPhoneで特定のzoomとfont-sizeの際に文字サイズが拡大するバグ|to-R
http://blog.webcreativepark.net/2011/04/07-063417.html
Android2.1以前はselect要素に対して、スタイルの高さに関連する指定が効かない
Androidでスタイル属性に高さを指定した場合、ボックスサイズが拡大されず、中のテキストのみ大きく表示されます。 対処方法として、背景画像を指定することでブラウザ標準の枠線を取り去ることができます。 また、CSS3である程度の装飾は可能にです。[参考サイト]
Android・iPhone向けwebサイト開発で知っておくと良いこと|村式流 イッパシエンジニアへの道
http://blog.ville.jp/2011/04/25/619
横に回転させた時に画面のサイズに合わせて拡大させたい場合
ワンソースで全てのスマートフォンに横幅をフィットさせる方法です。 この方法を使えば一回のコーディングですべての端末に反映することが可能ですが、 端末ごとに拡大縮小をすることになるので、文字サイズが読みづらくなったり、 逆に大きくなりすぎたりする場合があり、けして万能な方法ではありません。 また、Android2.1以降でselectボックスのサイズを大きくするときの懸念点として、 zoomプロパティを使用した場合に発生するiPhoneの文字の表示バグ等があります。 使用する場合は表示チェックを入念にしなければいけません。[参考サイト]
スマートフォンのサイトを横に回転させた時に画面のサイズに合わせて拡大させるには|これからゆっくり考L +α http://sakaki0214.com/2011/06/05223738.html
スマートフォンサイトで文字サイズが違う場合
iOSのsafariではフォントサイズが自動アジャストされ、PCで見ていたサイズとかなり差異がある場合があります。 それを解消するためにcssに-webkit-text-size-adjust というプロパティを使用することで、フォントサイズの変更が可能になります。 このプロパティはwebkit特有の特有のプロパティで、基本はautoになっています。 必要があれば変更するぐらいで、基本的にはあまり使用しません。[参考サイト]
項目:文字サイズの自動アジャスト|@IT
http://www.atmarkit.co.jp/fsmart/articles/iphone/04.html
iPhone/Androidサイトで文字サイズを固定する方法|Web Designing satoimo18+
http://www.satoimo18.com/archives/136
スマートフォンはPCと比べて比較的コーディングはしやすいですが、 実機チェックと対応バージョンの考慮など、様々な制限があるので、 要件をしっかり決めてから、デザイン、コーディングを進めるのが重要です。
(kazuki)