2013年04月18日

スマートフォンサイト作成の注意点

 スマートフォンとPC、テンプレートを共有する場合で使用できないHTMLやスタイルシート、作成上の注意点についてお勉強してみよう。

 

スマートフォンサイト作成時の注意点

1、インラインフレーム

 インラインフレームそのものは使えるが、スクロールバーが表示されなかったりと色々と問題が生じる。
 スクロールそのものは、2本指でフリックすればスクロールできる。
 HTMLでの対策はあるにはあるけど、面倒なのでなるべく使わないほうがいいかも。

 

2、一部の機種で太字表現ができない。

 Androidの標準フォントであるDroid Sans Japaneseにはボールド体が存在しない。
 スタイルシートの〔FONT-WEIGHT: bold〕は使用できない。

 

3、フォントサイズは12px以上で作成

 iPhoneには特定のfont-size(11px、10px、9px)のときだけマルチバイトの幅計算がおかしくなるバグが存在する。

 

4、極力画像・Flashを使わない

 Flashが表示できないスマートフォンもある。

 

5、等幅フォントで作成する

 ヒラギノ角ゴ W3・なければ、MS ゴシック・MS 明朝などの等幅フォントで作る。

 

6、リンクの領域は44px以上で

 スマートフォンは指で操作するタッチデバイスという特徴上、小さいリンクなどは非常に押しにくい。

 

7、横幅は320pxで見やすい、リキッドサイズでデザインするのが望ましい

 640pxでデザインする場合は余白やフォントサイズなどがすべて2で割り切れるようにデザインしないといけないらしい。
 320PXくらいでも見やすい、デザイン。
 横にしたときでも崩れない、リキッドサイズでデザインする。 
 また、viewportでページを表示する際の画面表示に関する定義を行わないと、320PXで作ったサイトでもiPhone では980pxと判断されて、縮小表示される。

 

8、オンザマウスで説明がでるようなデザインは使わない

 マウスを乗せると、説明がでるようなデザインはスマートフォンでは使えない。
 使いたいなら、タップしたときにもマウスを乗せたときと同様な説明がでるようにする。

 

 難問は、viewportというmetaタグ。

 勉強不足のせいか、ぴんとこない・・・。




この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。
※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
最近のコメント
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。