Home » vue » Lock orientation (Portrait) on VueJS PWA for all browsers

Lock orientation (Portrait) on VueJS PWA for all browsers

Posted by: admin November 26, 2021 Leave a comment

Questions:

I am trying to get a screen lock to work for my web application.
I have been searching the forums but cant find a solution to this problem.

Does anybody know how I can tackle this problem?

Problem solved with a css fix.

Answers:

I used the scss media queries to solve this problem.

@media screen and (min-aspect-ratio: 13/9) {
  html {
    transform: rotate(-90deg);
    transform-origin: left top;
    width: 100vh;
    overflow-x: hidden;
    position: absolute;
    top: 100%;
    left: 0;
  }
  .bw-dashboard {
    height: inherit;
  }
}
@media screen and (min-width: 1292px) {
  html {
    transform: none;
    transform-origin: none;
    width: 100%;
    overflow-x: none;
    position: relative;
  }
  .bw-dashboard {
    height: 100vh;
  }
}

###

Currently PWAs do not have an overall working solution and I think the CSS approach is not very satisfying.

But you can use the ScreenOrientation API which will work for all browser except Safari and Edge (mobile/desktop). Do not use the outdatet Screen API.

If you plan to wrap your PWA into a mobile app, frameworks like Capacitor or Cordova will provide a native bridge to access the respective orientation lock feature.