iPhoneブラウザの特徴の一つとして、画面を左右に90度傾けると画面の中もそれに合わせて回転する機能があります。
そのため、画面幅に合わせて伸縮するリキッドレイアウトとしてデザイン・コーディングしますが、中にはそれだけでは難しいものもあります。
そこで、傾きに合わせてbodyのclassを切り替えるjqueryのjavascriptをご紹介します。
※androidでも動きます。
サンプル
サンプル
※iPhoneで見てみてください。
ダウンロード
使い方
ダウンロードしたtilt.jsをjquery.jsと一緒に読み込むだけで動作します。
用途
- 縦横でボックスの幅を切り替える
- 縦横で背景色を切り替える
- 縦（または横）の場合だけ表示する文章や画像を設置する
- 縦に最適化されたサイズのまま、横の場合はそれを中央寄せにして表示する
等々…
仕組み
仕組みはとても単純でwindow.orientationを使い、傾きを取得し、0の場合は「縦」それ以外の場合は「横」としてbodyのclassをlong（縦）とside（横）に切り替えています。
