orientationchange イベントは、ユーザがモバイルデバイスを縦または横に回転させたときにトリガされます。
orientationchange イベントを使用するには、window オブジェクトにアタッチします:
$(window).on("orientationchange",function(){
alert("The orientation has changed!");
});
コールバック関数には、次のモバイルデバイスの向きを返す、イベントオブジェクトを引数として1つ持つことができます: "portrait"(デバイスは縦向き)か "landscape"(デバイスは横向き):
$(window).on("orientationchange",function(event){
alert("Orientation is: " + event.orientation);
});
Try it Yourself »orientationchange イベントは、window オブジェクトにバインドされるため、window.orientation プロパティを使用して、 たとえば、ポートレートビューとランドスケープビューを区別して、さまざまなスタイルを設定することができます:
$(window).on("orientationchange",function(){
if(window.orientation == 0) // Portrait
{
$("p").css({"background-color":"yellow","font-size":"300%"});
}
else // Landscape
{
$("p").css({"background-color":"pink","font-size":"200%"});
}
});
Try it Yourself »window.orientation プロパティは、ポートレートの場合は 0 を、ランドスケープの場合は 90 か -90 を返します。