How to Detect When the iPhone Goes into Landscape Mode via JavaScript? Is There an Event for This

How do I detect when the iPhone goes into landscape mode via JavaScript? Is there an event for this?

Yup, via the onorientationchange event and the window.orientation property.

Documented by Apple

(On platforms other than iOS, the ScreenOrientation API is used instead.)

How do I correctly detect orientation change using Phonegap on iOS?

This is what I do:

function doOnOrientationChange() {    switch(window.orientation) {        case -90: case 90:        alert('landscape');        break;       default:        alert('portrait');        break;     }}  window.addEventListener('orientationchange', doOnOrientationChange);  // Initial execution if neededdoOnOrientationChange();

Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions

if(window.innerHeight > window.innerWidth){
    alert("Please use Landscape!");
}

jQuery Mobile has an event that handles the change of this property... if you want to warn if someone rotates later - orientationchange

Also, after some googling, check out window.orientation (which is I believe measured in degrees...)

EDIT: On mobile devices, if you open a keyboard then the above may fail, so can use screen.availHeight and screen.availWidth, which gives proper height and width even after the keyboard is opened.

if(screen.availHeight > screen.availWidth){
    alert("Please use Landscape!");
}

Can js/jQuery determine the orientation of the iPhone?

window.orientation will give you an integer that denotes the rotation. You can listen for orientation changes by adding an event to the body:

<body onorientationchange="updateOrientation();">

Just on the off-chance that the link dies or gets moved at some point:

Value  |  Description
-------+-------------------------------------------------------------------------------
 0     |  Portrait orientation. This is the default value.
-90    |  Landscape orientation with the screen turned clockwise.
 90    |  Landscape orientation with the screen turned counterclockwise.
 180   |  Portrait orientation with the screen turned upside down. This value is currently not supported on iPhone.

Is there any window event for orientation change using @HostListener like we have @HostListener(window:scroll, ['$event']) for scrolling?

From MDN; you can use window:orientationchange to detect when the orientation of the device has changed.

@HostListener('window:orientationchange', ['$event'])
onOrientationChange(event) {
  console.log('orientationChanged');
}

Here is a short clip to see this in action in Chrome Dev Tools: https://streamable.com/o2ilm

Detect if iPhone is rotating as it's rotating?

The deviceorientation event fires with updates to the current position of the device. Here's a demo.

Note that this only works on iPhone ≥ 4 and iPad ≥ 2. Older Apple hardware doesn't have a gyroscope.

The event also worked on my Galaxy Nexus Android 4 device in Chrome and the stock browser.

You could also preload your background images so that the switch occurs instantly.

Detect change in orientation using javascript

NOTE: orientationChange is deprecated

Instead use screen.orientation using the screenOrientation interface

var orientation = (screen.orientation || {}).type || screen.mozOrientation || screen.msOrientation;

if (orientation === "landscape-primary") {
  console.log("That looks good.");
} else if (orientation === "landscape-secondary") {
  console.log("Mmmh... the screen is upside down!");
} else if (orientation === "portrait-secondary" || orientation === "portrait-primary") {
  console.log("Mmmh... you should rotate your device to landscape");
} else if (orientation === undefined) {
  console.log("The orientation API isn't supported in this browser :(");
}

How to find out if ipad is in landscape/portrait mode in javascript/jquery?

jQTouch checks it like so:

orientation = Math.abs(window.orientation) == 90 ? 'landscape' : 'portrait';

http://github.com/senchalabs/jQTouch/blob/master/jqtouch/jqtouch.js

You can also listen to onorientationchange events

See previous answer: Detect rotation of Android phone in the browser with JavaScript