How do I correctly detect orientation change using Phonegap on iOS

Question

I found this orientation test code below looking for JQTouch reference material  This works correctly in the iOS simulator on mobile Safari but doesn   t get handled correctly in Phonegap  My project is running into the same issue that is killing this test page  Is there a way to sense the orientation change using JavaScript in Phonegap   window onorientationchange   function         window orientation returns a value that indicates whether iPhone is in portrait mode  landscape mode with the screen turned to the     left  or landscape mode with the screen turned to the right       var orientation   window orientation    switch  orientation        case 0           If in portrait mode  sets the body s class attribute to portrait  Consequently  all style definitions matching the body class  portrait   declaration          in the iPhoneOrientation css file will be selected and used to style  Handling iPhone or iPod touch Orientation Events            document body setAttribute  class    portrait              Add a descriptive message on  Handling iPhone or iPod touch Orientation Events            document getElementById  currentOrientation   innerHTML    Now in portrait orientation  Home button on the bottom           break       case 90           If in landscape mode with the screen turned to the left  sets the body s class attribute to landscapeLeft  In this case  all style definitions matching the          body class  landscapeLeft   declaration in the iPhoneOrientation css file will be selected and used to style  Handling iPhone or iPod touch Orientation Events            document body setAttribute  class    landscape           document getElementById  currentOrientation   innerHTML    Now in landscape orientation and turned to the left  Home button to the right           break       case -90           If in landscape mode with the screen turned to the right  sets the body s class attribute to landscapeRight  Here  all style definitions matching the          body class  landscapeRight   declaration in the iPhoneOrientation css file will be selected and used to style  Handling iPhone or iPod touch Orientation Events            document body setAttribute  class    landscape           document getElementById  currentOrientation   innerHTML    Now in landscape orientation and turned to the right  Home button to the left           break

User · Answer

Although the question refers to only PhoneGap and iOS usage, and although it was already answered, I can add a few points to the broader question of detecting screen orientation with JS in 2019:

window.orientation property is deprecated and not supported by Android browsers.There is a newer property that provides more information about the orientation - screen.orientation. But it is still experimental and not supported by iOS Safari. So to achieve the best result you probably need to use the combination of the two: const angle = screen.orientation ? screen.orientation.angle : window.orientation.
As @benallansmith mentioned in his comment, window.onorientationchange event is fired before window.onresize, so you won't get the actual dimensions of the screen unless you add some delay after the orientationchange event.
There is a Cordova Screen Orientation Plugin for supporting older mobile browsers, but I believe there is no need in using it nowadays.
There was also a screen.onorientationchange event, but it is deprecated and should not be used. Added just for completeness of the answer.

In my use-case, I didn't care much about the actual orientation, but rather about the actual width and height of the window, which obviously changes with orientation. So I used resize event to avoid dealing with delays between orientationchange event and actualizing window dimensions:

window.addEventListener('resize', () => {
  console.log(`Actual dimensions: ${window.innerWidth}x${window.innerHeight}`);
  console.log(`Actual orientation: ${screen.orientation ? screen.orientation.angle : window.orientation}`);
});

Note 1: I used EcmaScript 6 syntax here, make sure to compile it to ES5 if needed.

Note 2: window.onresize event is also fired when virtual keyboard is toggled, not only when orientation changes.

User · Answer

While working with the orientationchange event  I needed a timeout to get the correct dimensions of the elements in the page  but matchMedia worked fine  My final code   var matchMedia   window msMatchMedia    window MozMatchMedia    window WebkitMatchMedia    window matchMedia   if  typeof matchMedia       undefined          use matchMedia function to detect orientationchange   window matchMedia   orientation  portrait    addListener function            your code             else        use orientationchange event with timeout  fires to early      window  on  orientationchange   function         window setTimeout function              your code            300

User · Answer

This is what I do    x000D   x000D  function doOnOrientationChange     x000D      switch window orientation      x000D        case -90  case 90  x000D          alert  landscape    x000D          break   x000D        default  x000D          alert  portrait    x000D          break   x000D        x000D    x000D     x000D  window addEventListener  orientationchange   doOnOrientationChange   x000D     x000D     Initial execution if needed x000D  doOnOrientationChange    x000D   x000D   x000D      Update May 2019  window orientation is a deprecated feature and not supported by most browsers according to MDN  The orientationchange event is associated with window orientation and therefore should probably not be used

User · Answer

here is what i did   window addEventListener  orientationchange   doOnOrientationChange    function doOnOrientationChange           if  screen height  gt  screen width             console log  portrait            else            console log  landscape

User · Answer

I m creating a jQTouch app in PhoneGap for the iPhone  I ve been battling with this issue for days  I ve seen the eventlistener solution suggested a few times  but just could not get it to work   In the end I came up with a different solution  It basically checks the width of the body periodically using settimeout  If the width is 320 then the orientation is portrait  if 480 then landscape  Then  if the orientation has changed since the last check  it will fire either a portrait stuff function or a landscape stuff function where you can do your thing for each orientation   Code  note  I know there is some repetition in the code  just haven t bothered to trim it down yet        get original orientation based on body width deviceWidth      body   width    if  deviceWidth    320        currentOrientation    portrait     else if  deviceWidth    480        currentOrientation    landscape         fire a function that checks the orientation every x milliseconds setInterval checkOrientation  500       check orientation function checkOrientation         deviceWidth      body   width        if  deviceWidth     320             newOrientation    portrait             else if  deviceWidth     480             newOrientation    landscape                if orientation changed since last check  fire either the portrait or landscape function     if  newOrientation    currentOrientation            if  newOrientation     portrait                 changedToPortrait                      else if  newOrientation     landscape                 changedToLandscape                      currentOrientation   newOrientation              landscape stuff function changedToLandscape         alert  Orientation has changed to Landscape           portrait stuff function changedToPortrait         alert  Orientation has changed to Portrait

User · Answer

if  window matchMedia   orientation  portrait    matches          you re in PORTRAIT mode    if  window matchMedia   orientation  landscape    matches         you re in LANDSCAPE mode

User · Answer

I ve found this code to detect if the device is in landscape orientation and in this case add a splash page saying  change orientation to see the site   It s working on iOS  android and windows phones  I think that this is very useful since it s quite elegant and avoid to set a landscape view for the mobile site  The code is working very well  The only thing not completely satisfying is that if someone load the page being in landscape view the splash page doesn t appears    lt script gt   function          use strict        var isMobile             Android  function                 return navigator userAgent match  Android i                      BlackBerry  function                 return navigator userAgent match  BlackBerry i                      iOS  function                 return navigator userAgent match  iPhone iPad iPod i                      Opera  function                 return navigator userAgent match  Opera Mini i                      Windows  function                 return navigator userAgent match  IEMobile i                      any  function                 return  isMobile Android      isMobile BlackBerry      isMobile iOS      isMobile Opera      isMobile Windows                          if  isMobile any              doOnOrientationChange            window addEventListener  resize   doOnOrientationChange   false               function doOnOrientationChange             var a   document getElementById  alert            var b   document body          var w   b offsetWidth          var h   b offsetHeight           w   h  gt  1     a className    show   b className    full-body      a className    hide   b className                     lt  script gt    And the HTML   lt div id  alert  class  hide  gt   lt div id  content  gt This site is not thought to be viewed in landscape mode  please turn your device  lt  div gt   lt  div gt

User · Answer

I believe that the correct answer has already been posted and accepted  yet there is an issue that I have experienced myself and that some others have mentioned here   On certain platforms  various properties such as window dimensions  window innerWidth  window innerHeight  and the window orientation property will not be updated by the time that the event  orientationchange  has fired  Many times  the property window orientation is undefined for a few milliseconds after the firing of  orientationchange   at least it is in Chrome on iOS    The best way that I found to handle this issue was   var handleOrientationChange    function         var struct   function            struct parse               struct showPortraitView   function            alert  Portrait Orientation      window orientation              struct showLandscapeView   function            alert  Landscape Orientation      window orientation              struct parse   function            switch window orientation               case 0                        Portrait Orientation                     this showPortraitView                    break              default                        Landscape Orientation                     if  parseInt window orientation                          window orientation     this lastOrientation                          setTimeout this  10                       else                                               this lastOrientation   window orientation                          this showLandscapeView                                          break                       struct lastOrientation   window orientation      return struct        window addEventListener  orientationchange   handleOrientationChange  false     I am checking to see if the orientation is either undefined or if the orientation is equal to the last orientation detected  If either is true  I wait ten milliseconds and then parse the orientation again  If the orientation is a proper value  I call the showXOrientation functions  If the orientation is invalid  I continue to loop my checking function  waiting ten milliseconds each time  until it is valid   Now  I would make a JSFiddle for this  as I usually did  but JSFiddle has not been working for me and my support bug for it was closed as no one else is reporting the same problem  If anyone else wants to turn this into a JSFiddle  please go ahead   Thanks  I hope this helps

User · Answer

I m pretty new to iOS and Phonegap as well  but I was able to do this by adding in an eventListener  I did the same thing  using the example you reference   and couldn t get it to work  But this seemed to do the trick      Event listener to determine change  horizontal portrait  window addEventListener  orientationchange   updateOrientation     function updateOrientation e    switch  e orientation           case 0             Do your thing         break       case -90             Do your thing         break       case 90             Do your thing         break       default          break            You may have some luck searching the PhoneGap Google Group for the term  orientation     One example I read about as an example on how to detect orientation was Pie Guy   game  js file   It s similar to the code you ve posted  but like you    I couldn t get it to work   One caveat  the eventListener worked for me  but I m not sure if this is an overly intensive approach  So far it s been the only way that s worked for me  but I don t know if there are better  more streamlined ways     UPDATE fixed the code above  it works now

User · Answer

I use window onresize   function    checkOrientation      And in checkOrientation you can employ window orientation or body width checking but the idea is  the  window onresize  is the most cross browser method  at least with the majority of the mobile and desktop browsers that I ve had an opportunity to test with

User · Answer

if  window DeviceOrientationEvent           Listen for orientation changes     window addEventListener  orientationchange   orientationChangeHandler       function orientationChangeHandler evt               Announce the new orientation number            alert screen orientation              Find matches         var mql   window matchMedia   orientation  portrait              if  mql matches     true

User · Answer

The following worked for me   function changeOrientation    switch window orientation    case 0     portrait  home bottom case 180     portrait  home top  alert  portrait H      window  height     W      window  width             break            case -90     landscape  home left           case 90     landscape  home right         alert  landscape H      window  height     W      window  width                 break                    window onorientationchange   function                    Need at least 800 milliseconds             setTimeout changeOrientation  1000               I needed the timeout because the value of window orientation does not update right away

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

Examples related to javascript

Examples related to iphone

Examples related to ios

Examples related to cordova

Examples related to jqtouch