We have a mobile web page on our website that needs to be always rendered in landscape in the browser when it's loaded. Also, the page needs to be locked in landscape, so that the device cannot change the orientation.
Is there any JS API in the major mobile browsers or CSS property that will acplish this?
We have a mobile web page on our website that needs to be always rendered in landscape in the browser when it's loaded. Also, the page needs to be locked in landscape, so that the device cannot change the orientation.
Is there any JS API in the major mobile browsers or CSS property that will acplish this?
Share Improve this question edited Feb 28, 2017 at 18:28 tompave 12.4k8 gold badges39 silver badges64 bronze badges asked Feb 28, 2017 at 17:23 BuffBoxxBuffBoxx 111 gold badge1 silver badge2 bronze badges 2- 1 Check here stackoverflow./questions/14360581/… – Jaypee Commented Feb 28, 2017 at 21:13
- 1 Possible duplicate of Force “Landscape” orientation mode – War10ck Commented Feb 28, 2017 at 21:19
1 Answer
Reset to default 4You can try using this code:
#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);
}
}
You should also add this to the body tag:
<body id="container">
I found this solution here. Same blog also offers additional suggestion but I didn't try them, as the above one worked well.