What is the best global way to detect screen orientation on tablets

Question

I'm looking for a global solution which will detect orientation on tablets (not just iPad or Android device but the more the better).

One solution :

  device.portrait = function() {
    return (window.innerHeight / window.innerWidth) > 1;
  };

  device.landscape = function() {
    return (window.innerHeight / window.innerWidth) < 1;
  };

My point of view is that this above is not working well.

I need good solution to load dedicated images in carousel on portrait view and dedicated image on landscape view when orientation change.

Cheers.

Why is that code not working for you? – Rory McCrossan Jul 16 '14 at 09:03 — Rory McCrossan, Jul 16 '14 at 09:03

score 2 · Answer 1 · answered Jul 16 '14 at 09:07

2

Use media queries for that

For landscape

@media screen and (min-width: 700px) and (orientation: landscape) { 
    /*css for a image*/ 
}

For portrait

@media screen and (min-width: 700px) and (orientation: portrait) { 
    /*css for different image*/
}

answered Jul 16 '14 at 09:07

4dgaurav

11,360
4
32
59

Just to clarify: i have to dynamically change images in carousel so CSS won't solve my problem. – user3844198 Jul 16 '14 at 09:16
I will work good, css properties are applied to the elements, whether elements comes dynamically or anything else it will not harm. – 4dgaurav Jul 16 '14 at 09:29

score 1 · Answer 2 · edited May 23 '17 at 10:33

I don't know why your code is not working well .
But I can suggest you to use this code which is works for me ,

<span id="orientation">orientation</span>

$(document).ready(checkOrientation);
$(window).resize(checkOrientation);

function checkOrientation() {
    var orientation = "Portrait";
    var screenWidth = $(window).width();
    var screenHeight = $(window).height();
    if (screenWidth > screenHeight) {
        orientation = "Landscape";
    }
    $("#orientation").html(orientation);
}

And you can see demo here !

What is the best global way to detect screen orientation on tablets

2 Answers2