スマホ対策のデザインに関するチェックリスト。
Contents
viewport
まずは横幅などがおかしくないかの確認
|
1 |
<meta name="viewport" content="width=device-width, initial-scale=1"/> |
コピペで済ませていませんか？改めて学び直したい「Viewport」のすべて
横のはみ出しチェック
幅が100%超えないように下記のcssを追加
|
1 2 3 4 5 6 7 8 |
* { box-sizing: border-box; } *:before, *:after { box-sizing: border-box; /* 擬似要素にも同様のプロパティを指定 */ } |
画像や文字などではみ出している要素がないかチェック。
メディアクエリ
幅によってある程度のコントロールを。
|
1 2 |
/** 320以上760以下 **/ @media all and (min-width: 320px) and (max-width: 760px) { } |
iPhone/iPad/Apple Watch解像度(画面サイズ)早見表
他にも随時追加予定
