ドブログ[Do-Blog]は個人的なメモブログです。文具、Mac、写真、情報設計が主な話題。OM-D E-M5mark2やTG-4で撮ったり、LAMYとMoleskineで書いたり、Macで仕事してます。

Androidでorientationchangeイベントが意図した通りに動かないので。

2011年5月12日 木曜日@11:15

スマホの制作をしていてはまったのでメモ

iPhnoe/iPodTouch/iPadを含むスマホは縦持ち、横持ちという概念がある。

スマホWeb(アプリじゃないよ)を制作する際、その縦横変換をちゃんと制御しないとレイアウトが崩れてしまうことがある。

ちょいとインターネッツで調べたら、sngmrさんのサイトに以下の情報があった。

jQueryでiPhone/iPadの向きを検出する

(要jQuery)以下のコードを貼り付ければOK。簡単。すごい。

$(function(){
$(window).bind(“load orientationchange”,function(){
if(Math.abs(window.orientation) === 90){
$(“body”).html(“横向き”);//横向きの場合の命令
}else{
$(“body”).html(“縦向き”);//縦向きの場合の命令
}
})
})

iPhnoe/iPodTouch/iPadなどはこれで解決なのだが、Androidではorientationchangeの発行されるタイミングが変(iPhoneが変なのかも知れないけど)なので、もうちょっと改造する。

$(function(){
$(window).bind(“load orientationchange resize“,function(){
if(Math.abs(window.orientation) === 90){
$(“body”).html(“横向き”);//横向きの場合の命令
}else{
$(“body”).html(“縦向き”);//縦向きの場合の命令
}
})
})

スゲーバタ臭いけど、resize(リサイズ)イベント入れたら動いたのでこれで好しとする。

スマホWebはまだまだ情報が少なくて大変です。

→自分なりにスマホ制作のポイントをまとめました:いいかおまえら。スマートフォンWeb制作する前に読んどけよ。

この記事へのリンク
コメント

コメントはまだありません。

コメントする

←前の記事:「」 |  次の記事:「」→