jQueryでiPhone、iPad、Androidのそれぞれ縦・横画面の向きを判別してCSSクラスを追加する方法｜BLACKFLAG

iPhoneやAndroid（アンドロイド）向けのスマートフォンサイトを制作する際、 各キャリアの縦向き、横向きを考慮した画面設計やHTML構成を考えて制作しなければなりません。 それぞれ端末ごとに細かな設定の変更が必要な場合など OSの判別をする必要になってきますが、 そんな際に使える、jQueryを使って簡単にOSを判別し、それぞれCSSクラスを追加し 画面の縦／横それぞれ切り替わった際にも別々のクラスを追加するスクリプトの紹介。 jQuery SmartPhone SWITCH アクセスされたOSと画面の向きを判別して それぞれ＜body＞タグにCSSクラスを追加します。 追加するCSSクラスは以下の通り。 —————————————————– iPhoneには「body class=”iphone”」追加 iPadには「body class=”ipad”」追加 Androidには「

[webinstitute]

縦横切り替え

[moruzo15]

スマートフォンのUA判定

[haruna1221]

縦横画面、両方に最適化…か…(´・ω・｀)お仕事増えちゃうよね。 RT: jQueryでiPhone、iPad、Androidのそれぞれ縦・横画面の向きを判別してCSSクラスを追加する方法 -