"lock" orientation of a website for mobile (iPad, iPhone)

lock.css

/* 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);
  }
}

How this rotation will affect the page width and height?

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!

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%;

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

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

This solution work on iPhone SE

Thank you!

Thanks! Works perfectly on iPad with iOS 2017.

thanks for illuminating the most simple solution !

but after img position will no accurate

Doesn't work on Fixed position elements such as navigation

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