Skip to content

Instantly share code, notes, and snippets.

@visnup
Created May 5, 2012 20:31
Show Gist options
  • Save visnup/2605440 to your computer and use it in GitHub Desktop.
Save visnup/2605440 to your computer and use it in GitHub Desktop.
"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);
}
}
@dcbarans
Copy link

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
Copy link

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

@nileshm-cuelogic
Copy link

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

@mickey9801
Copy link

This solution work on iPhone SE

@baconasia
Copy link

Thank you!

@metalvegetarianoprogresivo

Thanks! Works perfectly on iPad with iOS 2017.

@Metajake
Copy link

thanks for illuminating the most simple solution !

@mrinamulhaq
Copy link

but after img position will no accurate

@georganix
Copy link

Doesn't work on Fixed position elements such as navigation

@jeromemalot
Copy link

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