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

Question

I am building a website specifically for mobile devices  There is one page in particular which is best viewed in landscape mode    Is there a way to detect if the user visiting that page is viewing it in Portrait mode and if so  display a message informing the user that the page is best viewed in landscape mode  If the user is already viewing it in landscape mode then no message will appear   So basically  I want the site to detect the viewport orientation  if orientation is Portrait  then display an alert message advising the user that this page is best viewed in Landscape mode

User · Answer

Thanks to tobyodavies for guiding the way.

To achieve an alert message based on the mobile device's orientation you need to implement the following script within the function setHeight() {

if(window.innerHeight > window.innerWidth){
    alert("Please view in landscape");
}

User · Answer

Get the orientation  at any time in your js code  via  window orientation   When window orientation returns 0 or 180 then you are in portrait mode  when returning 90 or 270 then you are in landscape mode

User · Answer

The window object in JavaScript on iOS devices has an orientation property that can be used to determine the rotation of the device  The following shows the values window orientation for iOS devices  e g  iPhone  iPad  iPod  at different orientations   This solution also works for android devices as well  I checked in android native browser  Internet browser  and in the Chrome browser  even in the old versions of it   function readDeviceOrientation                               if  Math abs window orientation      90               Landscape       else              Portrait

User · Answer

This expands on a previous answer  The best solution I ve found is to make an innocuous CSS attribute that only appears if a CSS3 media query is met  and then have the JS test for that attribute   So for instance  in the CSS you d have    media screen only and  orientation landscape            Some innocuous rule here     body               background-color   fffffe           media screen only and  orientation portrait            Some innocuous rule here     body               background-color   fffeff            You then go to JavaScript  I m using jQuery for funsies   Color declarations may be weird  so you may want to use something else  but this is the most foolproof method I ve found for testing it  You can then just use the resize event to pick up on switching  Put it all together for   function detectOrientation            Referencing the CSS rules here          Change your attributes and values to match what you have set up      var bodyColor      body   css  background-color        if  bodyColor      fffffe             return  landscape         else     if  bodyColor      fffeff             return  portrait             document  ready function        var orientation   detectOrientation        alert  Your orientation is     orientation               document  resize function            orientation   detectOrientation            alert  Your orientation is     orientation                       The best part of this is that as of my writing this answer  it doesn t appear to have any effect on desktop interfaces  since they  generally  don t  seem to  pass any argument for orientation to the page

User · Answer

You can also use window matchMedia  which I use and prefer as it closely resembles CSS syntax   if  window matchMedia   orientation  portrait    matches          you re in PORTRAIT mode    if  window matchMedia   orientation  landscape    matches          you re in LANDSCAPE mode     Tested on iPad 2

User · Answer

Or you could just use this    window addEventListener  orientationchange   function         if  window orientation     90     window orientation     -90               Do stuff          false

User · Answer

see also http   stackoverflow com questions 641857 javascript-window-resize-event   see also http   mbccs blogspot com 2007 11 fixing-window-resize-event-in-ie html    Be wary of this  While you can just hook up to the standard window resize event  you ll find that in IE  the event is fired once for every X and once for every Y axis movement  resulting in a ton of events being fired which might have a performance impact on your site if rendering is an intensive task        setup  window onresize   function event        window resize event        timeout wrapper points with doResizeCode as callback function window resize e          window clearTimeout resizeTimeoutId         resizeTimeoutId   window setTimeout  doResizeCode      10         wrapper for height width check function doResizeCode         if window innerHeight  gt  window innerWidth           alert  Please view in landscape

User · Answer

I combined two solutions and it works fine for me   window addEventListener  orientationchange   function                            if  window matchMedia   orientation  portrait    matches           alert  PORTRAIT              if  window matchMedia   orientation  landscape    matches          alert  LANSCAPE             false

User · Answer

CCS only   media  max-width  1024px  and  orientation  portrait      tablet and smaller      body after      position  absolute      z-index  9999      width  100       top  0      bottom  0      content          background   212121 url http   i stack imgur com sValK png  0 0 no-repeat     replace with an image that tells the visitor to rotate the device to landscape mode        background-size  100  auto      opacity  0 95          In some cases you may want to add a small piece of code to reload to page after the visitor rotated the device  so that the CSS is rendered properly   window onorientationchange   function          var orientation   window orientation           switch orientation                 case 0              case 90              case -90  window location reload                 break

User · Answer

In order to apply all of these great comments to my daily coding  for continuity between all my applications  I have decided to use the following in both my jquery and jquery mobile code   window onresize   function  event      applyOrientation       function applyOrientation       if  window innerHeight  gt  window innerWidth        alert  You are now in portrait        else       alert  You are now in landscape

User · Answer

There s a way by which you can detect if user flipped their device to portrait mode using screen orientation  Just use the bellow code   screen orientation onchange   function           var type   screen orientation type       if  type match  portrait               alert  Please flip to landscape  to use this app                Now  onchange will get fired when ever user flips the device and alert will pop-up when user using portrait mode

User · Answer

After some experimentation I have found that rotating an orientation aware device will always trigger a browser window s resize event   So in your resize handler simply call a function like   function is landscape       return  window innerWidth  gt  window innerHeight

User · Answer

I think the more stable solution is to use screen instead of window  because it could be both - landscape or portrait if you will resize your browser window on desktop computer   if  screen height  gt  screen width       alert  Please use Landscape

User · Answer

You can use CSS3     media screen and  orientation landscape       body            background  red

User · Answer

One thing to note about window orientation is that it will return undefined if you are not on a mobile device  So a good function to check for the orientation might look like this  where x is window orientation     check for orientation function getOrientation x     if  x   undefined       return  desktop      else       var y      x  lt  0   y    landscape    y    portrait       return y          Call it like so   var o   getOrientation window orientation   window addEventListener  orientationchange   function       o   getOrientation window orientation     console log o      false

User · Answer

another alternative to determine orientation  based on comparison of the width height   var mql   window matchMedia   min-aspect-ratio  4 3     if  mql matches         orientation    landscape        You use it on  resize  event   window addEventListener  resize   function

User · Answer

Here s the best method I found  based on David Walsh s article  Detect Orientation Change on Mobile Devices   if   window matchMedia   orientation  portrait    matches          alert  Please use Landscape           Explanation    Window matchMedia   is a native method that allows you to define a media query rule and check its validity at any point in time   I find it useful to attach an onchange listener on the return value of this method  Example   var mediaQueryRule   window matchMedia   orientation  portrait    mediaQueryRule onchange   function    alert  screen orientation changed

User · Answer

This is what I use   function getOrientation             if window orientation is available        if  window orientation  amp  amp  typeof window orientation      number                      and if the absolute value of orientation is 90            if  Math abs  window orientation      90                           then it s landscape               return  landscape              else                         otherwise it s portrait               return  portrait                     else            return false     window orientation not available             Implementation  window addEventListener  orientationchange   function              if orientation is landscape         if  getOrientation        landscape                      do your thing            false

User · Answer

If you have the latest browsers window orientation might not work  In that case use following code for getting angle -   var orientation   window screen orientation angle    This is still an experimental technology  you can check the browser compatibility here

User · Answer

Instead of 270  it can be -90  minus 90

User · Answer

Some devices don t provide the orientationchange event  but do fire the window s resize event      Listen for resize changes window addEventListener  resize   function            Get screen size  inner outerWidth  inner outerHeight      false     A bit less obvious than the orientationchange event  but works very well  Please check here

User · Answer

David Walsh has a better and to the point approach      Listen for orientation changes window addEventListener  orientationchange   function          Announce the new orientation number   alert window orientation      false     During these changes  the window orientation property may change  A value of 0 means portrait view  -90 means a the device is landscape rotated to the right  and 90 means the device is landscape rotated to the left   http   davidwalsh name orientation-change

User · Answer

There are a few ways to do it  for example    Check window orientation value Compare innerHeight vs  innerWidth   You can adapt one of the methods below     Check if device is in portrait mode  function isPortrait         return window innerHeight  gt  window innerWidth      Check if device is in landscape mode  function isLandscape         return  window orientation     90    window orientation     -90       Example usage  if  isPortrait          alert  This page is best viewed in landscape mode          How do I detect the orientation change     document  ready function           window  on  orientationchange   function event            console log orientation

User · Answer

window  on  orientationchange  function  event        alert screen orientation type

User · Answer

if window innerHeight  gt  window innerWidth       alert  quot Please use Landscape  quot       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  gt  screen availWidth       alert  quot Please use Landscape  quot

User · Answer

I disagree with the most voted answer  Use screen and not window      if screen innerHeight  gt  screen innerWidth       alert  Please use Landscape         Is the proper way to do it  If you calculate with window height  you ll have trouble on Android  When keyboard is open  window shrinks  So use screen instead of window   The screen orientation type is a good answer but with IE   https   caniuse com  search screen orientation

User · Answer

I used for Android Chrome  The Screen Orientation API   To look the current orientation call console log screen orientation type   and maybe screen orientation angle    Results  portrait-primary   portrait-secondary   landscape-primary   landscape-secondary  Below is my code  I hope it ll be helpful   var m isOrientation     orientation  in screen   amp  amp   typeof screen orientation lock     function    amp  amp   typeof screen orientation unlock     function        if   isFullscreen    return  screen orientation lock  landscape-secondary   then      function             console log  new orientation is landscape-secondary               function e            console error e             here s Promise     screen orientation unlock       I tested only for Android Chrome - ok

User · Answer

Don t try fixed window orientation queries  0  90 etc doesn t mean portrait  landscape etc    http   www matthewgifford com blog 2011 12 22 a-misconception-about-window-orientation   Even on iOS7 depending how you come into the browser 0 isn t always portrait

User · Answer

iOS doens t update screen width  amp  screen height when orientation changes  Android doens t update window orientation when it changes    My solution to this problem   var isAndroid     android  i test navigator userAgent    if isAndroid        if screen width  lt  screen height             portrait mode on Android         else       if window orientation    0             portrait mode iOS and other devices           You can detect this change in orientation on Android as well as iOS with the following code   var supportsOrientationChange    onorientationchange  in window      orientationEvent   supportsOrientationChange    orientationchange     resize    window addEventListener orientationEvent  function         alert  the orientation has changed       false     If the onorientationchange event is not supported  the event bound will be the resize event

User · Answer

lt html xmlns  http   www w3 org 1999 xhtml  gt    lt head gt     lt title gt Rotation Test lt  title gt     lt link type  text css  href  css style css  rel  stylesheet  gt  lt  style gt     lt script src  js jquery-1 5 min js  type  text javascript  gt  lt  script gt     lt script type  text javascript  gt          window addEventListener  resize   function                    Get screen size  inner outerWidth  inner outerHeight              var height     window  height                var width     window  width                 if width gt height                     Landscape                   mode   text  LANDSCAPE                  else                    Portrait                   mode   text  PORTRAIT                             false       lt  script gt    lt  head gt    lt body onorientationchange  updateOrientation     gt      lt div id  mode  gt LANDSCAPE lt  div gt    lt  body gt   lt  html gt

User · Answer

screen orientation addEventListener  change   function e     console log screen orientation type         screen orientation angle      false

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

Examples related to javascript

Examples related to jquery

Examples related to mobile

Examples related to viewport

Examples related to device-orientation