How to detect orientation of mobile device properly in jQuery?

Question

I am writing some jQuery code that i want to detect the mobile devices orientation whether portrait or landscape.

I have already tried while statements but they send my test alert constantly with no avail.

my jQuery:

function test() {
    if (window.matchMedia("(orientation: portrait)").matches) {
     alert('You are in portrait!');
  }

  else if (window.matchMedia("(orientation: landscape)").matches) {
     alert('You are in landscape!');
  }
}
  test();

Currently this runs as soon as you load into the page so that I could test the results. What I would like it to do is detect if the device is using landscape and change some CSS if it is. The problem is is that it works properly at detecting it just when I turn the device into landscape it does not detect properly. It detects portrait or landscape if I refresh the page while i have the device in that orientation. What I want to happen is for it to detect all the time as soon as I put the device into landscape mode I want it to change the CSS to the proper CSS for landscape and when it goes back to portrait I want it to change back to the original CSS. But in this case for testing and for you guys I want it to alert properly every time I change the device orientation not when i refresh the page in that orientation.

You can use a listener, i've never tried but i found this https://stackoverflow.com/questions/5284878/how-do-i-correctly-detect-orientation-change-using-phonegap-on-ios — Jordan, Apr 12 '19 at 06:06
Thank you very much! I have been trying at this for hours and even searching stuff like that nothing came up. It works exactly the way i would like it to! — Cody, Apr 12 '19 at 06:23
I actually just found that it does not work 100%. It detects landscape for -90 and portrait for 0 or 180 but not landscape for 90 it just says portrait for 90 too. — Cody, Apr 12 '19 at 06:25

score 3 · Answer 1 · answered Apr 12 '19 at 07:00

I actually just figured out a way using the switch method. For some reason case -90 || 90: was not working properly so i just made one for each proper orientation like so.

function doOnOrientationChange() {
    switch(window.orientation) {
      case 90:
        alert('landscape');
        break;
      case -90:
        alert('landscape');
        break;
      case 0:
        alert('portrait');
        break;
      case 180:
        alert('portrait');
        break;
      default:
        break;
    }
}

window.addEventListener('orientationchange', doOnOrientationChange);

// Initial execution if needed
doOnOrientationChange();

Thank you everyone for your help! This works for me on all devices I have to test on!

Sami Ahmed Siddiqui · Answer 2 · 2019-04-12T07:26:24.560

0

Use orientationchange. It is fired when the orientation of the device has changed. You can find more about this from here: https://developer.mozilla.org/en-US/docs/Web/API/Window/orientationchange_event

function detectMobileOrientation() {
    switch(screen.orientation.angle) {  
      case 90:
      case 270:
        alert('landscape' + screen.orientation.angle);
        break; 
      default:
        alert('portrait' + screen.orientation.angle);
        break; 
    }
}
window.addEventListener("orientationchange", detectMobileOrientation);

detectMobileOrientation()

You can test this directly using this link. I have tested the code on Android 9 and it is working fine for me.

edited Apr 12 '19 at 07:26

answered Apr 12 '19 at 06:42

Sami Ahmed Siddiqui

2,328
1
16
29

That does not exactly work. When the page is reloaded in portrait it says portrait. But as soon as i go to landscape it still says portrait. I go back to portrait it then says landscape. – Cody Apr 12 '19 at 06:49
@Cody Test this now. I have updated the code. Hope, it works for you. – Sami Ahmed Siddiqui Apr 12 '19 at 06:55
Sadly it did not. – Cody Apr 12 '19 at 07:02
@Cody I have updated the code and tested it on Android 9. It is working fine for me now. please recheck and let me know what you found. – Sami Ahmed Siddiqui Apr 12 '19 at 07:27
I will just use what i have currently working until i get my hands on an Android device to test there too. But at the current moment this is working fine. – Cody Apr 12 '19 at 07:34

How to detect orientation of mobile device properly in jQuery?

2 Answers2