久々にモバイルサイトのhtmlコーディングをした。
PCほどの複雑さはないにしろ、それでもキャリア間による違いがあり、個々に注意をしながらコーディングをせねばならない。
キャリア間による違いの問題で、SoftBankのVGA端末の表示についての問題ってのがある。
現在のモバイルコーディングは、docomoのQVGA端末向けに、コーディングをすれば、とりあえずは3キャリア共通のコーディング可能(auはまた別問題があるが)なわけだが、SoftBankのVGA端末で表示させると、画像が小さく表示される問題がある。
いや、本当はディスプレイの解像度で考えたらこれが合ってるのだが、それの解像度に合わせて画像サイズを作るととんでもない容量になり、表示なんてとても出来ないだろう。
そんな理由から、docomoはQVGA向けに作られた画像をVGA端末では、二倍に引き延ばして表示させることでレイアウトを綺麗に見せている。
SoftBankは素直にそのまま表示させたわけで、画像が小さく見える訳なんですね。
それなら、その画像を延ばして表示すれば、docomoみたいに見えるじゃん！？
と、とりあえずの見た目のレイアウトが改善されるじゃないかと、久々のコーディングで僕は思ったわけです。
んで、どうするかというと、画像の横幅を下記のピクセルで作成し、コーディング時に横幅を「パーセンテージ」で指定してあげることで、SoftBankのVGA端末でもdocomoみたいに見た目をある程度改善することが出来るんだね。
例えば、240pxの画像なんかは100%で横幅指定してやれば画面いっぱいに広がってくれるのです。
高さは自動でその比率に合わせてくれるので、高さは指定しません。
んで、「パーセンテージ」で指定することによってdocomo及びauに対しても適用できるので、まさに一石三鳥なわけです。笑。
228pxなんかはバナーに使えるだろうし、48pxあたりは画像のサムネイル画像とかに使えるんじゃないかな。
画像のサイズが固定されるわけだが、見た目を気にする人はちょっと試してみては、どうだろうか。
240px → 100%
228px → 95%
216px → 90%
204px → 85%
192px → 80%
180px → 75%
168px → 70%
156px → 65%
144px → 60%
132px → 55%
120px → 50%
108px → 45%
96px → 40%
84px → 35%
72px → 30%
60px → 25%
48px → 20%
36px → 15%
24px → 10%
12px → 5%
高速で大容量の画像が表示される時代がきたら、まーこの問題は、いずれ解決するだろうね。
Popularity: 6% [?]
Related Articles:
この方法で助かりました！
まさかこんな方法で簡単に回避できるとは思いませんでした。。
ありがとうございました。
今はほとんどコーディングをしてないすが、これをもっと早くに発見してれば良かったな～と思うのでありやした。笑。