スマホ　画像の幅

Question

画像は640picで作成しています。iframeを使う場合は620picにしてiframeのタグはwidth="640"としています。たまたま古いiphoneで見た所、iframeでの画像が半分しか見えていませんでした。スマホ対応の画像の横幅またiframeを使う場合の画像の幅をお教え下さい。参考URL http://item.rakuten.co.jp/ujichaen/ugh957-01/            http://item.rakuten.co.jp/ujichaen/rhm101/

Answer

ECマスターズの田中です。横幅は機種によって異なるので一律にご案内しづらいのですが、結論から先に申し上げますと、スマートフォン用商品説明文に表示させる場合は横幅608ピクセル以上あるファイルを利用して、横幅304ピクセルで表示させるのが良いと思います。iPhoneやAndroidなどのスマートフォンブラウザは、自身の解像度を把握しており、どの程度拡大して表示すれば丁度良い見やすさになるかを判断して「dpiスケーリング」という、ページの拡大・縮小を行います。dpiスケーリング機能については、下記URLをご参照ください。http://www.mdn.co.jp/di/articles/2909/?page=6その際、画像ファイルについては、dpiスケーリングを行ってしまうと解像度が低くなり、粗く見えてしまいますので、デバイスそのままの解像度で表示させております。利用者数の多い、iPhone4以降の3.5インチ〜4インチのモデルのブラウザでは、画面の横幅640ピクセルを、320ピクセル（つまり1/2）にスケーリングして表示させております。スマートフォン用商品説明文の左右には8ピクセルの余白が設定されているため、内容の横幅は320-(8x2)=304ピクセルとなります。画像ファイルについては、dpiスケーリングを行ってしまうと解像度が低くなり、粗く見えてしまいますので、デバイスそのままの解像度で表示させます。つまり、304の2倍である、608ピクセルのファイルを使うと綺麗に表示される、ということになります。iPhone6や6Plus、大型Android機になるとスケーリング後の横幅やスケーリングの倍率が大きくなっていくのですが、標準的に一番狭い304ピクセルに合わせて作成していただくと良いと思います。

Answer

解りました　有り難うございました。

スマホ 画像の幅

カテゴリーから探す

スマホ　画像の幅