Blocking device rotation on mobile web pages

Question

Is it possible to detect on my page  for example using Javascript  when user visit it using mobile device in portrait mode  and stop orientation changing when user rotate its phone to landscape  There is game on my page  optimized for portrait display only and I don t want it in landscape

User · Answer

Simple Javascript code to make mobile browser display either in portrait or landscape..

(Even though you have to enter html code twice in the two DIVs (one for each mode), arguably this will load faster than using javascript to change the stylesheet...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Mobile Device</title>
<script type="text/javascript">
// Detect whether device supports orientationchange event, otherwise fall back to
// the resize event.
var supportsOrientationChange = "onorientationchange" in window,
    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";

window.addEventListener(orientationEvent, function() {
    if(window.orientation==0)
    {
      document.getElementById('portrait').style.display = '';
      document.getElementById('landscape').style.display = 'none';
    }
    else if(window.orientation==90)
    {
      document.getElementById('portrait').style.display = 'none';
      document.getElementById('landscape').style.display = '';
    }
}, false);
</script>
<meta name="HandheldFriendly" content="true" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no" />
</head>
<body>
<div id="portrait" style="width:100%;height:100%;font-size:20px;">Portrait</div>
<div id="landscape" style="width:100%;height:100%;font-size:20px;">Landscape</div>

<script type="text/javascript">
if(window.orientation==0)
{
  document.getElementById('portrait').style.display = '';
  document.getElementById('landscape').style.display = 'none';
}
else if(window.orientation==90)
{
  document.getElementById('portrait').style.display = 'none';
  document.getElementById('landscape').style.display = '';
}
</script>
</body>
</html>

Tested and works on Android HTC Sense and Apple iPad.

User · Answer

With the new CSS3 features  you could rotate the page the opposite orientation that they rotated  Sorry  no IE7- support       var rotate   0 - window orientation  setAttribute  transform rotate   rotate  deg  -ms-transform rotate   rotate  deg  -webkit-transform rotate   rotate  deg     style

User · Answer

In JavaScript-enabled browsers it should be easy to determine if the screen is in landscape or portrait mode and compensate using CSS  It may be helpful to give users the option to disable this or at least warn them that device rotation will not work properly   Edit  The easiest way to detect the orientation of the browser is to check the width of the browser versus the height of the browser  This also has the advantage that you ll know if the game is being played on a device that is naturally oriented in landscape mode  as some mobile devices like the PSP are   This makes more sense than trying to disable device rotation   Edit 2  Daz has shown how you can detect device orientation  but detecting orientation is only half of the solution  If want to reverse the automatic orientation change  you ll need to rotate everything either 90   or 270   -90    e g     window  bind  orientationchange resize   function event     if  event orientation        if  event orientation     landscape           if  window rotation    90            rotate this  -90           else           rotate this  90                          function rotate el  degs      iedegs   degs 90    if  iedegs  lt  0  iedegs    4    transform    rotate   degs  deg      iefilter    progid DXImageTransform Microsoft BasicImage rotation   iedegs        styles         transform  transform       -webkit-transform   transform       -moz-transform   transform       -o-transform   transform      filter  iefilter       -ms-filter   iefilter          el  css styles       Note  if you want to rotate in IE by an arbitrary angle  for other purposes   you ll need to use matrix transform  e g   rads   degs   Math PI   180  m11   m22   Math cos rads   m21   Math sin rads   m12   -m21  iefilter    progid DXImageTransform Microsoft Matrix        M11       m11             M12       m12             M21       m21             M22       m22      sizingMethod    auto expand     styles  filter     styles  -ms-filter     iefilter     mdash or use CSS Sandpaper  Also  this applies the rotation style to the window object  which I ve never actually tested and don t know if works or not  You may need to apply the style to a document element instead   Anyway  I would still recommend simply displaying a message that asks the user to play the game in portrait mode

User · Answer

You can detect the orientation change  but I don t think you can prevent it    https   developer apple com library content documentation AppleApplications Reference SafariWebContent HandlingEvents HandlingEvents html http   articles sitepoint com article iphone-development-12-tips 2

User · Answer

New API s are developing  and are currently available    screen orientation lock         webkit only   and  screen lockOrientation  orientation      Where  orientation  can be any of the following   portrait-primary -  It represents the orientation of the screen when it is in its primary portrait mode  A screen is considered in its primary portrait mode if the device is held in its normal position and that position is in portrait  or if the normal position of the device is in landscape and the device held turned by 90   clockwise  The normal position is device dependant   portrait-secondary -  It represents the orientation of the screen when it is in its secondary portrait mode  A screen is considered in its secondary portrait mode if the device is held 180   from its normal position and that position is in portrait  or if the normal position of the device is in landscape and the device held is turned by 90   anticlockwise  The normal position is device dependant   landscape-primary -  It represents the orientation of the screen when it is in its primary landscape mode  A screen is considered in its primary landscape mode if the device is held in its normal position and that position is in landscape  or if the normal position of the device is in portrait and the device held is turned by 90   clockwise  The normal position is device dependant   landscape-secondary -  It represents the orientation of the screen when it is in its secondary landscape mode  A screen is considered in its secondary landscape mode if the device held is 180   from its normal position and that position is in landscape  or if the normal position of the device is in portrait and the device held is turned by 90   anticlockwise  The normal position is device dependant   portrait -  It represents both portrait-primary and portrait-secondary   landscape -  It represents both landscape-primary and landscape-secondary   default -  It represents either portrait-primary and landscape-primary depends on natural orientation of devices  For example  if the panel resolution is 1280 800  default will make it landscape  if the resolution is 800 1280  default will make it to portrait   Mozilla recommends adding a lockOrientationUniversal to screen to make it more cross-browser compatible   screen lockOrientationUniversal   screen lockOrientation    screen mozLockOrientation    screen msLockOrientation    Go here for more info  https   developer mozilla org en-US docs Web API Screen lockOrientation

User · Answer

x000D   x000D   rotate-device   x000D      width  100   x000D      height  100   x000D      position  fixed  x000D      z-index  9999  x000D      top  0  x000D      left  0  x000D      background-color   000  x000D      background-image  url  path to img rotate png   x000D      background-size  100px 100px  x000D      background-position  center  x000D      background-repeat  no-repeat  x000D      display  none  x000D    x000D   x000D   media only screen and  max-device-width  667px  and  min-device-width  320px  and  orientation  landscape   x000D    rotate-device   x000D    display  block  x000D     x000D    x000D   lt div id  rotate-device  gt  lt  div gt  x000D   x000D   x000D

User · Answer

You could use the screenSize width and screenSize height properties and detect when the width   height and then handle that situation  either by letting the user know or by adjusting your screen accordingly   But the best solution is what  Doozer1979 says    Why would you override what the user prefers

User · Answer

seems weird that no one proposed the CSS media query solution    media screen and  orientation  portrait              and the option to use a specific style sheet    lt link rel  stylesheet  type  text css  href  css style p css  media  screen and  orientation  portrait   gt    MDN  https   developer mozilla org en-US docs Web Guide CSS Media queries orientation

[javascript] Blocking device rotation on mobile web pages

Examples related to javascript

Examples related to mobile

Examples related to mobile-phones

Examples related to mobile-website