Lock orientation (Portrait) on VueJS PWA for all browsers

时光怂恿深爱的人放手 提交于 2020-08-24 04:57:58

问题


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

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!