Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
"lock" orientation of a website for mobile (iPad, iPhone)
/* if portrait mode is detected, rotate the entire site -90 degrees to hint rotating to landscape */
@media (orientation: portrait) {
body {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
}
@klihelp

This comment has been minimized.

Copy link

@klihelp klihelp commented May 1, 2014

How this rotation will affect the page width and height?

@KillerSquid

This comment has been minimized.

Copy link

@KillerSquid KillerSquid commented May 21, 2014

brilliantly simple and effective. Probably a much more 'robust' way to do it but for the simple little web-apps I'm building for my son's iPad this is perfect.

Thanks!

@dcbarans

This comment has been minimized.

Copy link

@dcbarans dcbarans commented May 28, 2014

This needed further work for me. I ended up using the following for a perfect rotation:
(written in SASS)

@include transform-origin(0% 0%);
@include transform( rotate(90deg));
position: absolute;
left: 100%;
@iamcharlesb

This comment has been minimized.

Copy link

@iamcharlesb iamcharlesb commented Jun 8, 2014

hi, i saw similar solution in stackoverflow too. Just curious to know why do we need give position as absolute.

@nileshm-cuelogic

This comment has been minimized.

Copy link

@nileshm-cuelogic nileshm-cuelogic commented Jun 26, 2015

This solution is not working for me on iPhone 6+, any hint?. Whereas it works like a magic on android devices..

@mickey9801

This comment has been minimized.

Copy link

@mickey9801 mickey9801 commented May 11, 2016

This solution work on iPhone SE

@baconasia

This comment has been minimized.

Copy link

@baconasia baconasia commented Nov 5, 2016

Thank you!

@metalvegetarianoprogresivo

This comment has been minimized.

Copy link

@metalvegetarianoprogresivo metalvegetarianoprogresivo commented Jul 18, 2017

Thanks! Works perfectly on iPad with iOS 2017.

@Metajake

This comment has been minimized.

Copy link

@Metajake Metajake commented Jul 26, 2017

thanks for illuminating the most simple solution !

@inamulhaqjutt

This comment has been minimized.

Copy link

@inamulhaqjutt inamulhaqjutt commented Aug 7, 2017

but after img position will no accurate

@georganix

This comment has been minimized.

Copy link

@georganix georganix commented Jan 15, 2018

Doesn't work on Fixed position elements such as navigation

@jeromemalot

This comment has been minimized.

Copy link

@jeromemalot jeromemalot commented Jun 20, 2018

Pretty smart indeed, but doest not work if your CSS uses vh and vw units.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment