Lock orientation (Portrait) on VueJS PWA for all browsers

问题

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.

回答1:

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

回答2:

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.

来源：https://stackoverflow.com/questions/58732970/lock-orientation-portrait-on-vuejs-pwa-for-all-browsers