いまさらながらスマホのUI表示に苦戦してます。
まあ、現状のWEBサイトを作る場合、BtoCでもBtoBでもスマホ対策は必須ですよね。
私の場合、デザインが本業でないこともあり、ちょっとサボっていましたが、今後の業務アプリだとほぼ必須となってくるだけにこれを機に覚えることに。
Contents
ヘッダーの部分
まずスマホ対応で表示させるためにはmetaスクリプトをスマホ用にする。スマホ用のCSS、通常のjQuery、スマホ用のjQueryを読み込む必要がでてきます。
下記をheadタグの中に入れればOKです。
|
1 2 3 4 |
<meta name="viewport" content="width=device-width, initial-scale=1"/> <link rel="stylesheet" href="jquery.mobile-1.0.min.css" /> <script type="text/javascript" src="jquery-1.6.4.min.js"></script> <script type="text/javascript" src="jquery.mobile-1.0.min.js"></script> |
もちろんバージョンはその都度違ってきますので注意。
またjQueryは携帯のものと通常のものの順番が異なると動きません。またjQueryはできればurlを張るのではなく、上記のようにローカルから読み込んだほうが良いです。
これだけでとりあえずUIがかなりスマホ仕様になります。
参考リンク
Formタグの中身
formの内部に関しては下記のようにHTML5のカスタムデータ属性(data-role)を使用します。
|
1 2 3 4 5 |
<form > <div date-role="fieldcontain"> //formの中身 </div> </form> |
またスマホで使用する際にはチェックボックスなどは必ずlabelと対応させましょう。
そうじゃないと押しにくくて仕方ありません。
あとはとにかくリファレンスをみて都度覚えていくことでしょう。
ちなみに参考にしたのは下記書籍です。
またこれはスマホだけに限りませんが、テーブル表示等の場合、
- 数字は右詰め
- 日付は中央表示
- 文字は左詰め
にするのが良いでしょう。
