HTML5, Javascreen display image if portrait/landscape

Question

I am looking for a script to detect if the screen is landscape or portrait without rotating your phone (the initial screen size if you want) in order to display an image to rotate the device if the game is landscape one (and the initial load of the page was portrait).

I've found lots of information on "orientation change" events, but nothing to detect the view on the initial load of page.

Possible duplicate of [Detect viewport orientation, if orientation is Portrait display alert message advising user of instructions](http://stackoverflow.com/questions/4917664/detect-viewport-orientation-if-orientation-is-portrait-display-alert-message-ad) — OddDev, Oct 05 '15 at 14:33
Just do a simple check to see if current width > current height. If so you are landscape, otherwise you are portrait... Not sure what "Javascreen" is but with Javascript you can use `window.innerWidth` and `window.innerHeight`. — Manno, Oct 05 '15 at 14:34
@Pot-Nut, right.. exactly what the duplicate question's marked answer says.. but I'm not sure that's the best answer.. I'm sure there is a window property in the html5 spec for orientation.. or a polyfill for a working draft spec. — Brett Caswell, Oct 05 '15 at 14:43
@BrettCaswell The duplicate question comment wasn't there when I posted my comment. I'm not aware of any HTML5 spec for confirming orientation on page load. There are CSS3 media queries e.g. `(orientation: landscape)` but OP asked for Javascript. The only orientation-specific Javascript I can think of is for detecting an orientation change event. — Manno, Oct 05 '15 at 14:47
yeah.. it just seems odd to me that you wouldn't be able to get the initial state from the device, where as css can with media queries.. but I'm generally suggesting one should use frameworks/utilities like **modernzier** instead of rolling out their own methods that derive states of a device. — Brett Caswell, Oct 05 '15 at 14:52
@BrettCaswell It is unnecessary and inappropriate to utilise an entire framework for something that can be achieved by simply comparing the current width and height. — Manno, Oct 05 '15 at 15:01
@Pot-Nut .. that's false.. when you don't have an API, you leverage a framework.. deriving a state of the device through computation is inapprorate. If you're targeting **mobile devices** and you don't have an API, you leverage frameworks.. No app developer should take it upon themselves to implement this workaround. it isn't in the context of your app. ....just so we cover all bases here.. **`window != device != document != useragent != app`** .. unless your app happens to be chromium or something — Brett Caswell, Oct 05 '15 at 21:49
@BrettCaswell Saying to leverage a framework when you do not have an API is false. That's unnecessarily bloating your application by throwing in a framework that has 1000x the functionality you need... Anyway, in this instance we do have an API... `window.innerHeight` and `window.innerWidth`. With this question being tagged Javascript and HTML5 it is almost certain these methods are available. I suggest you look at [Fabio. C's answer](http://stackoverflow.com/a/32951963/3112083) for the ideal solution. Also, Modernizr is for feature detection so is entirely useless in this situation. — Manno, Oct 06 '15 at 07:38

Fabio C. · Answer 1 · 2015-10-06T08:48:24.007

You can try with

function isPortrait() {
  if (typeof (window.orientation) != 'undefined') {
    return (window.orientation === 0 || window.orientation === 180);
  }
  else {
    return (window.innerHeight > window.innerWidth);
  }
}

It test if window.orientation property is supported, if it isn't it checks if window height is greater than window width.

EDIT. window.orientation is preferred over width and height test because on mobile device when onscreen keyboard popup the window height changes giving a wrong landscape information.

EDIT. You can use media queries too but whatever you choose be sure to have a fallback if the browser you are targeting doesn't support it.

http://caniuse.com/#search=matchmedia

score 0 · Answer 2 · answered Oct 05 '15 at 15:12

Just execute this whenever you want.

if (window.matchMedia("(orientation: landscape)").matches){

   //Go landscape
};
else {

   // Go portrait
}

Warning: This gives you the orientation of your browser. Not the device. So, I have assumed that the browser is maximized to automatically fit to the screen of your device.

Google for "media queries" for more information about media changes.

HTML5, Javascreen display image if portrait/landscape

2 Answers2