スマホで画像を半分の大きさで表示する

スマホサイトを作る場合、Retinaディスプレイ用に表示したい倍の大きさで画像を作ってどうにかして半分に縮小して表示するってのを結構なサイトがやってます。
今までは以下のような感じでzoomを使ってました。

img { zoom: .5; }

これだと凄い楽なんですが、JSで何かする時にもめるケースが結構多いです。
zoom処理にともなって予期しないことが起きる確率が格段にあがってしまうのはあまりよろしくありません。
また、後々にPCで見た時にも一定のクオリティを担保したい、とかなったときにも結構もめると思います。
というか今もめてるんですけどね、IE8で。

IE8に限っては、zoomの値を1に戻してCSSで画像の大きさを指定するようにしました。
以下みたいな感じで。

.ie8 img { height: auto; zoom: 1; }
.ie8 img[width="100"] { width: 50px; }

こんな感じでサイト内で利用している画像サイズ分のwidthを指定しています。
で、いっそのこと640pxまでの一覧を最初から書いとけばよいじゃんと思ったのでエクセってみました。
ご利用いただく上でマシンに何かありましても責任は取れませんのでご注意ください。

half_img_120409_01.xls (51KB)

Dreamweaverで画像を挿入すると画像そのままのwidthとheightが入りますので、その値を半分にしてやっても良いですし、JSでやっても良いと思います。
Dreamweaverで半分のサイズが入るような拡張機能とかどなたか作らないですかねー。

comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

TrackBack URL :