forcing web-site to show in landscape mode only

Question

I want to show my web-site in landscape mode only  is it possibile  It does not matter what the orientation is of device in user s hand but the web site will always be in landscape mode  I have seen iPhone application working like that but can this be done for a web-site

User · Answer

While I myself would be waiting here for an answer  I wonder if it can be done via CSS    media only screen and  orientation portrait    wrapper  width 1024px      media only screen and  orientation landscape    wrapper  width 1024px

User · Answer

I had to play with the widths of my main containers   html      media only screen and  orientation  portrait  and  max-width  555px        transform  rotate 90deg       width  calc 155         content         width  calc 155

User · Answer

Try this It may be more appropriate for you   x000D   x000D   container   display block    x000D   media only screen and  orientation portrait   x000D     container     x000D      height  100vw  x000D      -webkit-transform  rotate 90deg   x000D      -moz-transform  rotate 90deg   x000D      -o-transform  rotate 90deg   x000D      -ms-transform  rotate 90deg   x000D      transform  rotate 90deg   x000D      x000D    x000D   media only screen and  orientation landscape   x000D     container     x000D       -webkit-transform  rotate 0deg   x000D       -moz-transform  rotate 0deg   x000D       -o-transform  rotate 0deg   x000D       -ms-transform  rotate 0deg   x000D       transform  rotate 0deg   x000D      x000D    x000D   lt div id  container  gt  x000D       lt  -- your html for your website -- gt  x000D       lt H1 gt This text is always in Landscape Mode lt  H1 gt  x000D   lt  div gt  x000D   x000D   x000D    This will automatically manage even rotation

User · Answer

Golmaal really answered this  I m just being a bit more verbose    lt style type  text css  gt       warning-message   display  none         media only screen and  orientation portrait            wrapper   display none             warning-message   display block               media only screen and  orientation landscape            warning-message   display none           lt  style gt          lt div id  wrapper  gt       lt  -- your html for your website -- gt   lt  div gt   lt div id  warning-message  gt      this website is only viewable in landscape mode  lt  div gt    You have no control over the user moving the orientation however you can at least message them  This example will hide the wrapper if in portrait mode and show the warning message and then hide the warning message in landscape mode and show the portrait   I don t think this answer is any better than  Golmaal   only a compliment to it  If you like this answer  make sure to give  Golmaal the credit   Update  I ve been working with Cordova a lot recently and it turns out you CAN control it when you have access to the native features   Another Update  So after releasing Cordova it is really terrible in the end  It is better to use something like React Native if you want JavaScript  It is really amazing and I know it isn t pure web but the pure web experience on mobile kind of failed

[javascript] forcing web-site to show in landscape mode only

Examples related to javascript

Examples related to html

Examples related to mobile-browser