Force landscape orientation mode

Question

I m trying to force the  landscape  mode for my application because my application is absolutely not designed for the  portrait  mode   How can I do that

User · Answer

screen orientation lock  landscape      Will force it to change to and stay in landscape mode   Tested on Nexus 5   http   www w3 org TR screen-orientation  examples

User · Answer

It is now possible with the HTML5 webapp manifest  See below     Original answer   You can t lock a website or a web application in a specific orientation  It goes against the natural behaviour of the device   You can detect the device orientation with CSS3 media queries like this    media screen and  orientation portrait           CSS applied when the device is in portrait mode     media screen and  orientation landscape           CSS applied when the device is in landscape mode     Or by binding a JavaScript orientation change event like this   document addEventListener  orientationchange   function event       switch window orientation                   case -90  case 90                 Device is in landscape mode                break           default                 Device is in portrait mode                  Update on November 12  2014  It is now possible with the HTML5 webapp manifest   As explained on html5rocks com  you can now force the orientation mode using a manifest json file   You need to include those line into the json file          display         standalone      Could be  fullscreen    standalone    minimal-ui   or  browser          orientation     landscape      Could be  landscape  or  portrait                 And you need to include the manifest into your html file like this    lt link rel  manifest  href  manifest json  gt    Not exactly sure what the support is on the webapp manifest for locking orientation mode  but Chrome is definitely there  Will update when I have the info

User · Answer

I use some css like this  based on css tricks     media screen and  min-width  320px  and  max-width  767px  and  orientation  portrait      html       transform  rotate -90deg       transform-origin  left top      width  100vh      height  100vw      overflow-x  hidden      position  absolute      top  100       left  0

User · Answer

I had the same problem  it was a missing manifest json file  if not found the browser decide with orientation is best fit  if you don t specify the file or use a wrong path    I fixed just calling the manifest json correctly on html headers   My html headers    lt meta name  application-name  content  App Name  gt   lt meta name  mobile-web-app-capable  content  yes  gt   lt meta name  apple-mobile-web-app-capable  content  yes    gt   lt meta name  apple-mobile-web-app-status-bar-style  content  black    gt   lt link rel  manifest  href  manifest json  gt   lt meta name  msapplication-starturl  content     gt   lt meta name  viewport  content  width device-width  initial-scale 1  shrink-to-fit no  gt   lt meta name  theme-color  content     gt   lt meta name  msapplication-TileColor  content     gt   lt meta name  msapplication-config  content  browserconfig xml  gt   lt link rel  icon  type  image png  sizes  192x192  href  android-chrome-192x192 png  gt   lt link rel  apple-touch-icon  sizes  180x180  href  apple-touch-icon png  gt   lt link rel  mask-icon  href  safari-pinned-tab svg  color   ffffff  gt   lt link rel  shortcut icon  href  favicon ico  gt    And the manifest json file content        display    standalone      orientation    portrait      start url           theme color     000000      background color     ffffff      icons              src    android-chrome-192x192 png        sizes    192x192        type    image png          To generate your favicons and icons use this webtool  https   realfavicongenerator net   To generate your manifest file use  https   tomitm github io appmanifest   My PWA Works great  hope it helps

[javascript] Force “landscape” orientation mode

Examples related to javascript

Examples related to device-orientation