すべての端末で画像表示を同じにする方法

携帯電話の表示画面は、横幅だいたい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くらい
auwidth="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

関連記事

スポンサーリンク

scrollbar-darkshadow-color スクロールバーの右端と下端の色を指定する

ホームページ製作・web系アプリ系の製作案件募集中です。

上に戻る