[携帯]の入力フォームの横幅制御方法

入力フォーム(テキスト: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%" />

※端末の文字サイズ中を検証基準としています。

QRコード:サンプルページ
→サンプルページを見る

トラックバックURL

コメントする


匿名でも本名でもなんでも。


公開されません。


ブログやホームページなどありましたら。


コメントは承認制となっております。公開までしばらくお待ちくださいませ。

サイト内検索
モバイルサイト
これからゆっくり考L:QRコード

このページのトップへ