[携帯]の入力フォームの横幅制御方法
入力フォーム(テキスト:1行)の横幅サイズの調整について、いつもコーディング時に迷うのでメモしておきます。
※前提条件:3キャリア1ソース、xhtml
size="**"のみ指定
<input type="text" size="27" name="hoge" />
他のキャリアに合わせてサイズを調整していると、auで見た時に縦に2行になる場合があります(※端末の文字サイズにも依存します)。数字が大きすぎた場合?になるようですですが、だからといってauに合わせて数字を小さくすると、他のキャリアで見た時の横幅がかなり短くなってしまいます。
後、sizeで指定すると端末で設定している文字サイズによってフォームの長さも変わってきてしまうので、そこもちょっと気になるところです。
style="width:**"のみ指定
<input type="text" style="width:80%" name="hoge" />
docomoのiモードブラウザ1.0で横幅制御がきかなくなり、画面いっぱいに広がってしまいます。
なので、width:100%に指定すると3キャリアともに画面横幅いっぱいになります。
size="**"とstyle="width:**"両方指定
<input type="text" size="26" style="width:95%" />
「画面横幅いっぱいじゃなくて、右にちょっと余白があったほうがいいな...」
という場合は、size="**"とstyle="width:**"両方の指定が必要となってきます。
- ・iモードブラウザ2.0
- ・softbank
- ・au
がstyle="width:**"を優先するので、size="**"だけ指定した場合に気になっていた点が解消されます。
個人的にベストかなーと思っている数値は、以下のような感じです。
<input type="text" size="27" style="width:95%" />
※端末の文字サイズ中を検証基準としています。