在 VueJS PWA 上为所有浏览器锁定方向(纵向) [英] Lock orientation (Portrait) on VueJS PWA for all browsers

问题描述

我正在尝试为我的 Web 应用程序设置屏幕锁定.我一直在搜索论坛，但找不到解决此问题的方法.

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?

问题已通过 css 修复解决.

Problem solved with a css fix.

推荐答案

我使用了 scss 媒体查询来解决这个问题.

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

这篇关于在 VueJS PWA 上为所有浏览器锁定方向(纵向)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！