how to force mobile phones into landscape mode

August 31, 2015

updated 2015-09-23

How to force horizontal or landscape layout on mobile devices

How to force a mobile device into landscape-horizontal mode or view

all without javascript.

add this to your style sheet .css


#container { display:block; }
@media only screen and (orientation:portrait){
#container {
height: 100vw;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
}
@media only screen and (orientation:landscape){
#container {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
}

the word container is arbitrary but must be consistent.
Replace it everywhere it is used above and in the body id,
below, if you have already used the word elsewhere in
your code:

add id=container to the <body> tag

<BODY id="container">

 

That’s it. Fairly simple. At least don’t let anyone (all those children who talk like they are your parents) tell you that you cannot do it. {Remember I’m OK, Your OK"}

 


 

second option

in verticle-portrait mode, display only a message like


<div id="warning-message">
this website is only viewable in landscape mode
</div>

put it at the top of you page, right after

<body>

then your div which holds the entire page should have an identifying id like "wrapper" for instance


< div id="wrapper">
<!-- your html for your website -->
</div>

and in your style sheet, you can have

#warning-message { display: none; }
@media only screen and (orientation:portrait){
#wrapper { display:none; }
#warning-message { display:block; }
}
@media only screen and (orientation:landscape){
#warning-message { display:none; }
}

 


 

Possible Issues?

Some (iPhone) people have gotten frustrated with their (smart)phones turning horizontal when they did not want it and turned off the phones ability to rotate – locking them in the vertical mode.

Smart phone traffic can be important:
"Thirty nine of the top 50 digital news sites have more traffic to their websites and associated applications coming from mobile devices than from desktop computers."
"Portrait is the default orientation, so including added interactivity only in landscape mode might lose many users."

Doing a google search on how to lock a mobile device in landscape mode reveals that many have locked their phones in portrait mode and don’t remember how they did it – and need help to undo it.

If we lock our web pages in landscape mode, we may be locking those people out. Everyone has a different situation so you are free to do as you wish – just be sure you have determined all the possibilities.

This website is still not mobile "aware" but rather than "putting" it in landscape mode, I think I will just endeavor to get a mobile compliant theme for it "sooner than later".

 

 

2 Responses to how to force mobile phones into landscape mode

  1. wenjian on March 4, 2016 at 6:03 am

    I tried to display the warning message and put the warning message in my theme files. but it didn’t work. i realise my theme files are all php. i put it in header.php.
    is that the reason why it ain’t working?


    Try it somewhere you know it will work and then experiment from there.

  2. Deke on January 12, 2017 at 7:33 pm

    if landscape mode is forced, will it default back to portrait on exit/close?

    yes if you hold the phone upright

Leave a Reply

Your email address will not be published. Required fields are marked *

We try to post all comments within 1 business day