すべての端末で画像表示を同じにする方法
携帯電話の表示画面は、横幅だいたい240pxですが機種によって値が違うため、
それぞれの端末用に画像を出し分けたりするといった対処法があります。
[参考記事] width、heightを指定する場合のVGA端末対応
[参考記事] iモードブラウザ2.0のQVGA/VGA切替え機能
プログラムを通せるならコチラのほうがいいと思います。
Softbankの端末には横幅480pxまで表示できる端末(VGA端末)があり、
この端末だと横幅いっぱいになるように240px幅で作った画像も画面の半分にしかならないといった状態になります。
そこで対処法のひとつとして、<IMG>タグのWIDTH指定をパーセントで指定する方法があります。
この場合、<IMG>タグにはHEIGHTは指定してはいけません。
横幅だけ指定すれば元画像を縦横等倍に拡大縮小してくれます。
出力される画像ファイル自体の拡大はしないので、閲覧者のパケット代や表示スピードにもやさしいです。
問題点・注意点
<TABLE>タグの中で使用した場合は、パーセントの基準となるサイズが表示領域の幅ではなくなる場合があります。
例えば次のような場合
<table width="100%">
<tr>
<td width="50%"><img src="test.jpg" width="100%" /></td>
<td>あ</td>
</tr>
</table>
表示はそれぞれ異なります。
| docomo FOMA | 画面表示領域の幅が基準[240px] 表示可能な幅を越した場合は、表示可能な最大幅 上記例の場合：220pxくらい |
|---|---|
| docomo mova | 画面表示領域の幅が基準[240px] そもそも<TABLE>タグに未対応 上記例の場合：240px |
| Softbank | 画面表示領域の幅が基準[240px] 表示可能な幅を越した場合は、表示可能な最大幅 上記例の場合：220pxくらい |
| au | width="50%"の値が基準[120px] 上記例の場合：120px |
横幅240ピクセルを基準とした比率の対応表
| パーセント・比率 | 240px相当ピクセル値 |
|---|---|
| 100% | 240px |
| 99% | 237px |
| 98% | 235px |
| 97% | 232px |
| 96% | 230px |
| 95% | 228px |
| 94% | 225px |
| 93% | 223px |
| 92% | 220px |
| 91% | 218px |
| 90% | 216px |
| 89% | 213px |
| 88% | 211px |
| 87% | 208px |
| 86% | 206px |
| 85% | 204px |
| 84% | 201px |
| 83% | 199px |
| 82% | 196px |
| 81% | 194px |
| 80% | 192px |
| 79% | 189px |
| 78% | 187px |
| 77% | 184px |
| 76% | 182px |
| 75% | 180px |
| 74% | 177px |
| 73% | 175px |
| 72% | 172px |
| 71% | 170px |
| 70% | 168px |
| 69% | 165px |
| 68% | 163px |
| 67% | 160px |
| 66% | 158px |
| 65% | 156px |
| 64% | 153px |
| 63% | 151px |
| 62% | 148px |
| 61% | 146px |
| 60% | 144px |
| 59% | 141px |
| 58% | 139px |
| 57% | 136px |
| 56% | 134px |
| 55% | 132px |
| 54% | 129px |
| 53% | 127px |
| 52% | 124px |
| 51% | 122px |
| 50% | 120px |
| 49% | 117px |
| 48% | 115px |
| 47% | 112px |
| 46% | 110px |
| 45% | 108px |
| 44% | 105px |
| 43% | 103px |
| 42% | 100px |
| 41% | 98px |
| 40% | 96px |
| 39% | 93px |
| 38% | 91px |
| 37% | 88px |
| 36% | 86px |
| 35% | 84px |
| 34% | 81px |
| 33% | 79px |
| 32% | 76px |
| 31% | 74px |
| 30% | 72px |
| 29% | 69px |
| 28% | 67px |
| 27% | 64px |
| 26% | 62px |
| 25% | 60px |
| 24% | 57px |
| 23% | 55px |
| 22% | 52px |
| 21% | 50px |
| 20% | 48px |
| 19% | 45px |
| 18% | 43px |
| 17% | 40px |
| 16% | 38px |
| 15% | 36px |
| 14% | 33px |
| 13% | 31px |
| 12% | 28px |
| 11% | 26px |
| 10% | 24px |
| 9% | 21px |
| 8% | 19px |
| 7% | 16px |
| 6% | 14px |
| 5% | 12px |
| 4% | 9px |
| 3% | 7px |
| 2% | 4px |
| 1% | 2px |
関連記事
- 電話機の数字ボタンの右下にある「＃」は、シャープではありません
- 個体識別番号通知の設定URL
- ドメイン指定受信設定のURL
- Googleなどのサーチエンジンに携帯版サイトを認識させる方法
- Net_UserAgent_Mobile 携帯判別PEARパッケージの使い方と注意点
- ユーザーエージェントからのキャリア、世代判別
- 携帯用クローラーのIPアドレスとユーザーエージェント
- 携帯電話番号の割り振り表 電話番号からキャリア・地域がわかります
- FireMobileSimulator パソコンで携帯サイトを検証する
- 携帯サイトのmailtoを端末ごとに書き換える関数
- 携帯電話番号の変遷
- 携帯サイトでのmailtoの使い方
- mailto本文での改行 ドコモのN、Pで送信に失敗します
- PCからデコメールを送るときの仕様
- <docomo>タグ、<au>タグ、<softbank>タグの使用例
- キャリア・クローラーのIP・ユーザーエージェント一覧
- 役に立つかもしれないリンク集
- 裏コマンド(スペシャルモード)
- バッテリーの製造番号 製造の年月がわかります
- 位置情報・GPS情報の取得方法
- 携帯ドメイン一覧 携帯電話キャリア PHSキャリア
- 個体識別情報・UIDの取得方法
- 絵文字一覧 Softbankモバイル(Yahoo!ケータイ)
- 絵文字一覧 Docomo(ｉモード)
- 絵文字一覧 au(KDDI EZweb)
- auでインラインFLASH
スポンサーリンク
