Help us understand the problem. What is going on with this article?

スマホサイトのコーディング

More than 3 years have passed since last update.

スマホサイトのコーディングについて

スマホサイトをコーディングする際は
フォントサイズやボックス、画像の幅・高さ、その他諸諸を
デザインカンプの半分のサイズにする!
という今更な解説

そもそも一般的なスマートフォンのサイズは幅320pxらしい

(iphone5が320px、6は375pxなのでもはや一般的じゃなくなってきてるが)
自分がよく使うデザインカンプは幅640pxでつくられてるので、
フォントサイズなどを半分にしてコーディングするのは当然なんだが
画像は何でそのまま使うのか?というのをちょっと考えてみた

デバイス解像度とcss解像度

実際にはiphone5の場合、
デバイス解像度 640x1136px CSS解像度 320x568
css解像度とかcssピクセルとかいろいろ呼び方があるっぽいけど、プログラム書いたりとかするときはこの値を基準にするらしい。コーディングも同様
この比率(devicePixelRatio)はデバイスによっていろいろで、上記の場合は2になる
iphone6とかはちょっとちがうので割愛

Retina等での画像の表示

Retinaとかで画像が荒れる

要するに実際は幅640pxあるスマホで幅320pxの画像を見ることになるので
画像が荒れてしまうらしい。
(↑最近のスマホのサイズを考えると、厳密には違う気がするけど。)

これを防ぐために画像は大きいサイズでスライス、cssでwidth:100%とか指定する
レスポンシブとか考え出すと終わらないので、以上。

naoyeah
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした