低価格・高品質・最速のHTMLコーディングはクロノドライブへ

iPhoneで傾きに合わせてスタイルを切り替えるjavascript

iPhoneブラウザの特徴の一つとして、画面を左右に90度傾けると画面の中もそれに合わせて回転する機能があります。
そのため、画面幅に合わせて伸縮するリキッドレイアウトとしてデザイン・コーディングしますが、中にはそれだけでは難しいものもあります。
そこで、傾きに合わせてbodyのclassを切り替えるjqueryのjavascriptをご紹介します。
※androidでも動きます。

サンプル

サンプル
※iPhoneで見てみてください。

ダウンロード

tilt.zip

使い方

ダウンロードしたtilt.jsをjquery.jsと一緒に読み込むだけで動作します。

用途

  1. 縦横でボックスの幅を切り替える
  2. 縦横で背景色を切り替える
  3. 縦(または横)の場合だけ表示する文章や画像を設置する
  4. 縦に最適化されたサイズのまま、横の場合はそれを中央寄せにして表示する

等々…

仕組み

仕組みはとても単純でwindow.orientationを使い、傾きを取得し、0の場合は「縦」それ以外の場合は「横」としてbodyのclassをlong(縦)とside(横)に切り替えています。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ