PC表示とスマホ表示

  • 投稿日:
  • by
  • カテゴリ:
  • タグ:

AMPページで画像が縮小表示されない件ですが、このblogでは画像サイズを最大 640pxとしています。
それに対してスマホ(Galaxy A8)のディスプレイはフルHD(1920x1080)です。 縦画面にしても横方向の解像度は 1080pxあるわけですから、幅 640pxの画像が見切れてしまうのはなぜなんでしょうか?

ひと言で言えば、端末(画面)解像度と実質解像度はイコールではないということですね。

RWDで重要な「デバイス・ピクセル比」とは | Webデザイン・Webデザイナースクール

たとえば私の使っているスマホは、「デバイス・ピクセル比」は「3」という設定になっています。
この場合、画像の1ピクセルをディスプレイ上では3ピクセルを使って表現することになります。

つまり、私のスマートフォンのディスプレイの解像度が「1080px x 1920px(横1080ピクセル×縦1920ピクセル)」ではあるものの、
ブラウザ上でWebサイトを表示するときには3分の1の「360px x 640px」として表示することになっています。

このデバイス・ピクセル比というのは端末によってマチマチです。

【CSS】スマホ、タブレットの横幅(端末解像度と実質解像度)

かなり時間が空いてしまいましたが、前回、CSS3のメディアクエリについてお話しさせていただきました。
それに関係する話で、スマホとタブレットの横幅(端末解像度、実質解像度)を紹介したいと思います。

おそらく A8もデバイス・ピクセル比は3(360x640)なんでしょう。

幅 640pxの画像を 320pxで表示させるとキリが良さそうに思えますが、実際には 1.5倍に引き伸ばして表示する(2ピクセルを3画素で描く)ことになりますね。
かといって元画像の幅を 960pxにすると、PC表示で 640px幅にしたときに 2/3に縮小表示することになります。
幅 1920pxの元画像なら、スマホでもPCでも切りよく縮小表示できますが、ファイルサイズが大きくなってしまいます。
スマホ用とPC用で別々のサイズの画像を用意するなんてしたくないし。
悩ましいですね。