[スマートフォンサイト]スマートフォンサイト制作の前提の知識
スマートフォン用サイトのサイズについて
2つのサイズがある
- CSSピクセル(csspx) :ディスプレイのサイズ
- デバイスピクセル(dpx):解像度のサイズ
Retinaディスプレイ登場以前はこの2つは同じだった。
<iPhone3と、Retinaディスプレイ搭載iPhone4の比較>
iPhone3 ディスプレイサイズ:3.5インチ 解像度:320×480
iPhone4 ディスプレイサイズ:3.5インチ 解像度:640×960
⇒ ディスプレイサイズは同じだが、画像解像度が2倍になった ⇒ 2倍の大きさが必要
・Retinaディスプレイ対応のためには、デバイスピクセル基準で画像を用意すること
ベンダープレフィクス
「プレフィクス」とは? ⇒ 接頭辞
CSS3をブラウザで動作させる為に属性につける接頭辞のこと。
ブラウザごとに異なる。
-webkit- Google Chrome、Safari -moz- Firefox -o- Opera -ms- IE
スマートフォンのシェアで言えばiPhone(Safari)とAndroid(Chrome)で90%以上を占めるため、-webkit-でほぼカバーできる。
ベンダープレフィクスあり・なしの両方の表記をする。
CSS3のプロパティのブラウザ対応状況を調べるには、以下のサイトが便利
Can I use... Support tables for HTML5, CSS3, etc
background-sizeについて
スマートフォン用サイトで特に重要。背景画像のサイズを指定する場合に使うCSSのプロパティ
background-imageまたはbackgroundプロパティと一緒に指定する必要がある
主に使われる値
background-size: contain;
縦横比を保持しつつ領域内に収まる最大サイズになる
background-size: cover;
縦横比を保持しつつ、背景を全て覆う大きさになる(拡大する)画像が切れる場合がある
background-size: auto;
初期値
その他、パーセント指定・ピクセル指定も可能
スマートフォンサイトに必須・viewportの設定
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
- width=device-width :ディスプレイ幅を自動感知し、その幅を最大幅とする機能
- initial-scale :ディスプレイの方向を変えた場合の拡大倍率の設定。
向きを変えるとディスプレイ幅に合わせて拡大するのが初期設定。
変えたくない場合は initial-scale=1.0 とする。
値を2.0とすると2倍拡大になる。
- user-scalable=no :指で拡大縮小(ピンチイン・ピンチアウト)できるようにするかどうかの設定
値を1(yes)か0(no)とする場合もある