"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);
  }
}

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.