2

Is it possible to change the webpage orientation? I have a webpage, I want its orientation to be changed from portrait to landscape, specifically in the case of an iPad.

halfer
  • 19,824
  • 17
  • 99
  • 186
ba1ar
  • 534
  • 5
  • 22
  • 3
    Why you want to change the orientation manually/explicitly as the devices like ipad are already capable of doing this? – Nitesh Sep 20 '13 at 10:45
  • 1
    Wouldn't that just annoy everyone using the page if they had to flip their device? I mean, this is an interesting question, but from a user perspective, wouldn't that just piss folks off? +1 either way, just sayin' Also, when they flip their device, the page will likely "stay" in landscape mode, meaning that they will still simply see it in the wrong orientation. – Fluffeh Sep 20 '13 at 10:46
  • I need to have it as landscape... so if u can help me – ba1ar Sep 20 '13 at 10:49
  • hey Mr. Alien, thanks.. but this is for detecting... I need to change orientation – ba1ar Sep 20 '13 at 10:50
  • 1
    I have an opinion. If you are successful enough in finding a solution for this, believe me, when you open your website on an iPad, you would be the first person to be annoyed to such an extent, that you would wish to either let others get annoyed or remove that code, as iPad will change orientation (if it is not locked) and your code will also make that to rotate, so ipad will do just portrait and landscape and with your code, even safari will do portrait and landscape and the users will just "nod thier head" all the time. It would be seriously funny. – Nitesh Sep 20 '13 at 10:54

2 Answers2

5

You can not force an orientation, but you can detect the orientation and fake it by rotating the page if the orientation is portrait:

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
  body {
    -webkit-transform: rotate(90deg);
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 0;
  }
}

This media query will rotate the body element 90 degrees if the portrait orientation is used, so as to make it look like it's in landscape, and when the user flips the iPad 90 degrees it will go into the native landscape mode.

With jQuery it would look something like :

$(document).ready(function () {
  function reorient(e) {
    var portrait = (window.orientation % 180 == 0);
    $("body").css("-webkit-transform", !portrait ? "rotate(-90deg)" : "");
  }
  window.onorientationchange = reorient;
  window.setTimeout(reorient, 0);
});
adeneo
  • 312,895
  • 29
  • 395
  • 388
0

Yes. Take a look at the CSS definition of a media query.

@media screen and (orientation:portrait) { … }
@media screen and (orientation:landscape) { … }

Maybe this can inspire you.

swenedo
  • 3,074
  • 8
  • 30
  • 49
  • 2
    Tsk tsk tsk, link only answers drown kittens and stomp on puppies. While a link is good, you should really post the meat of the story in your answer. – Fluffeh Sep 20 '13 at 10:47
  • answers just referencing a link are not exactly answers especially since it appears you are not sure, usually you want to explain the solution and give samples of code that the link refers to – Patrick Evans Sep 20 '13 at 10:48
  • What it does is simply changes the image or content in each case, what the question is to explicitly change the mode while viewing the website. – Amit Sep 20 '13 at 10:50