ここでは、iPhone, iPad, Android 系端末で画面の縦横に応じて出力する HTML を切り替えたり、縦横の切り替わり時に発生するイベントを捕捉して何らかの処理を行うサンプルスクリプトを掲載しています。
スポンサーリンク
縦横に応じて読み込むスタイルシート ( css ) を切り替える
画面の縦横に応じて、それぞれ読み込ませるスタイルシートを切り替えるには、以下のようにスタイルシートを設定します。なお、IE などのデスクトップ用のブラウザでは、画面の表示領域の大きさを縦長にしたり、横長にしたりすることで読み込む css が切り替わっていることを確認できます。
<head>
<meta charset="UTF-8">
<title>iPhone/iPadで縦と横の時の読み込むスタイルシートをそれぞれ設定する</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 縦の場合に読み込むスタイルシート -->
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">
<!-- 横の場合に読み込むスタイルシート -->
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">
</head>
縦横の変更通知イベント ( orientationchange ) ハンドラを設定する
縦横が切り替わった時のイベント ( orientationchange ) を捕捉して 処理を行う jQuery を使用したサンプルです。スマホが発売され始めた当時は、iPhone ( iPad ) 限定の方法でしたが、現在では android でも イベントが追加されているのでほとんどの端末では使用可能だと思います。
$(function(){
/*
* イベントハンドラの設定
* load や resize も入れておかないと android で
* うまく動作しないことがあるかも。問題なさそうなら外したほうが吉。
*/
$(window).on("load orientationchange resize", function() {
/*
* 現在の回転角度を取得して縦横の判定を行う
* 90 と -90 の場合は横向きであると判断できる
*/
if(Math.abs(window.orientation) === 90) {
console.log("横で見ている");
} else {
console.log("縦で見ている");
}
/*
* 何らかの処理を追加
*/
});
});