updated 2019-12-29
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.
[There can be issues, see below]
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);
}
}
add id=container to the <body> tag
<BODY id="container">
the word container is arbitrary but must be consistent.
Also, Replace it everywhere it is used above, if you
have already used the word as a variable elsewhere in
your code:
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.
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.
if landscape mode is forced, will it default back to portrait on exit/close?
yes if you hold the phone upright
Can’t get either of those methods to work in Firefox or Chrome. Is this still workable, would certainly be very useful.