How to Make Our Webpage Open Defaultly in Landscape Mode for Mobile/Tablets Using Media Query/Js/Jquery

Can we make our webpage open defaultly in landscape mode for mobile/tablets using media query/js/jquery?

You COULD do this. Wether it is a good idea or not I'll let you decide (hint: it isn't).

Check for portrait orientation with CSS and rotate the body if necessary:

@media screen and (orientation:portrait) {
    body {
        transform: rotate(-90deg);
        transform-origin: 50% 50%;
}

rotating the body in this way will not cause it's width and height to update to suit it's new orientation so we will have to correct this with JQuery:

function checkOrientation() {
    var winWidth = $(window).width();
    var winHeight = $(window).height();

    if (winHeight > winWidth) {
        $('body').width(winHeight).height(winWidth); // swap the width and height of BODY if necessary
    }
}

checkOrientation(); // Check orientation on page load

// Check orientation on page resize (mainly for demo as it's unlikely a tablet's window size will change)
var resizeEnd;
$(window).resize(function(){ 
   clearTimeout(resizeEnd);
   resizeEnd = setTimeout(checkOrientation, 100);
});

---

DEMO (resize the preview panel)

---

DISCLAIMER: Not tested in anything but Chrome.

How do you force a website to be in landscape mode when viewed on a mobile device?

Short answer, you can't and you shouldn't control a user's OS behaviour via a website.

You can display a warning using the answer on the following question:
forcing web-site to show in landscape mode only

Or you can force your layout to look like landscape even in portrait mode using the following code (taken from http://www.quora.com/Can-I-use-Javascript-to-force-a-mobile-browser-to-stay-in-portrait-or-landscape-mode):

@media screen and (orientation:landscape) {

  #container {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    width: /* screen width */ ;
    height: /* screen height */ ;
    overflow: scroll;
  }
}

As the second site recommends though, you should try and make your site look good however the user wishes to view it.

Foundation: Force landscape mode on mobile devices

With the orientation selector that general03 recommended, I added the transform property:

@media only screen and (max-width: 630px) and (orientation: portrait) {
  .video-container{
    transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
  }
}

How can I prompt user to rotate device if in a certain mode landscape or portrait, similar to GameInformer App

Instead of jQuery/JS you can use CSS with a styled div container instead, which is only shown when the device is in portrait mode.

You can catch the orientation with a media query

Example:

/* for all screens */
#info {display: none;}

/* only when orientation is in portrait mode */
@media all and (orientation:portrait) {
    #info {
         display: block;
    }
}

Redirect using javascript or CSS on device rotation from portrait/landscape

Try this, using jQuery mobile (more info here) like proposed by @Felipe_Valencia:

<script src="code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
       //Don't forget to include these ^
<script>
    $( window ).on( "orientationchange", function( event ) {
      if (event.orientation == 'landscape' && screen.width>=1000){
          // load landscape version
          window.location = "http://www.domain/test/index.html";
      }
    });
</script>

EDIT:

---

There's also an Ipad only solution.
This script detects mobile browsers but I have removed the part, where it detects iPads. Check it out for yourself:

<script src="code.jquery.com/jquery-1.10.2.min.js"></script> 
<script src="code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script> 
<script>
//Don't forget to include these ^ 
$( window ).on( "orientationchange", function( event ) { 
    if (event.orientation == 'landscape'){ 
         // load landscape version if not mobile browser (except the ipad one) 
          if(!(/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) ) {
              window.location = "http://www.domain/test/index.html";
          };
    };
});
</script>

Hope it helped :)

How to auto refresh screen on orientation change, mobile design with media queries

Better to use the resize function other than refresh page

$(window).resize(function() {
  // add the stuff here to execute the your slider again;
});

Check out the sample code Here http://sharetext.org/DSXR

Sample V2 - http://sharetext.org/DSYC

Otherwise you can use a some flexible Responsive slider Plug-ins
http://www.woothemes.com/flexslider/flexslider-demo/
and you can download it here
https://github.com/woothemes/FlexSlider/downloads

Force “landscape” orientation mode

It is now possible with the HTML5 webapp manifest. See below.

---

Original answer:

You can't lock a website or a web application in a specific orientation. It goes against the natural behaviour of the device.

You can detect the device orientation with CSS3 media queries like this:

@media screen and (orientation:portrait) {
    // CSS applied when the device is in portrait mode
}

@media screen and (orientation:landscape) {
    // CSS applied when the device is in landscape mode
}

Or by binding a JavaScript orientation change event like this:

document.addEventListener("orientationchange", function(event){
    switch(window.orientation) 
    {  
        case -90: case 90:
            /* Device is in landscape mode */
            break; 
        default:
            /* Device is in portrait mode */
    }
});

---

Update on November 12, 2014: It is now possible with the HTML5 webapp manifest.

As explained on html5rocks.com, you can now force the orientation mode using a manifest.json file.

You need to include those line into the json file:

{
    "display":      "standalone", /* Could be "fullscreen", "standalone", "minimal-ui", or "browser" */
    "orientation":  "landscape", /* Could be "landscape" or "portrait" */
    ...
}

And you need to include the manifest into your html file like this:

<link rel="manifest" href="manifest.json">

Not exactly sure what the support is on the webapp manifest for locking orientation mode, but Chrome is definitely there. Will update when I have the info.

On mobile, how can I display an overlay when the screen orientation is in landscape and remove it when in portrait?

Something like this could help you:

// Listen for orientation changes
window.addEventListener("orientationchange", function() {
    // Announce the new orientation number
    //alert(screen.orientation);

  var orr = screen.orientation;

  if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) && (window.innerWidth > window.innerHeight) == true) {
  if (orr =='0'){

  ///portrait view///
 $('.ls-overlay').hide();

  } else if(orr =='-90'){

  ///landscap view///
  $('.ls-overlay').show();

  }

 } 
}, false);

The code above first adds an event listener and listens for the orientationchange and then on orientation change it will check to see if the users device is a mobile or a tablet and then if variable orr is 0, it will do the portrait view stuff and if its -90, it will do the landscape view stuff.

For more information on orientationchange you can read this:

Detect change in orientation using javascript

jQuery mobile orientationchange

---

Related Topics