スマートフォン最適化


CSSスプライト

複数の画像を連結して1ファイルにまとめ、CSSで表示範囲を指定して各画像を使用する手法
1つのファイルにまとめることでHTTPリクエストの数を削減し、ページの表示速度の向上を図る
background-imageプロパティで複数画像を連結した画像を表示し、
width、heightプロパティで表示範囲
background-positionプロパティで表示位置を調整する

高解像度画面向け対応

AppleのRetinaディスプレイ
デバイスピクセルとCSSピクセルが異なる
4デバイスピクセル=1CSSピクセル
大きなサイズの画像を使用
メディアクエリを使用
SVGやWebフォントを使用
JavaScriptライブラリを使用

ホーム画面ショートカットアイコン

link rel="apple-touch-icon"
link rel="apple-touch-icon-precomposed"

スタンドアローンモード

iOS限定
meta name="apple-mobile-web-app-capable" content="yes"

a要素での電話発信

a href="tel:xxxxxxxxxxx">

async属性、defer属性

script要素に上記の属性を付加すると非同期にjavascript実行する
script要素



Special title treatment

With supporting text below as a natural lead-in to additional content.