在所有浏览器的 VueJS PWA 上锁定方向(纵向)
Lock orientation (Portrait) on VueJS PWA for all browsers
我正在尝试为我的 Web 应用程序设置屏幕锁定。
我一直在搜索论坛,但找不到解决此问题的方法。
有人知道我该如何解决这个问题吗?
问题已通过 css 修复解决。
我使用 scss 媒体查询来解决这个问题。
@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;
}
}
目前 PWA 没有一个整体的工作解决方案,我认为 CSS 方法不是很令人满意。
但是你可以使用ScreenOrientation API which will work for all browser except Safari and Edge (mobile/desktop). Do not use the outdatet Screen API。
如果您打算将 PWA 封装到移动应用程序中,Capacitor or Cordova 等框架将提供一个本地桥接器来访问相应的方向锁定功能。
我正在尝试为我的 Web 应用程序设置屏幕锁定。 我一直在搜索论坛,但找不到解决此问题的方法。
有人知道我该如何解决这个问题吗?
问题已通过 css 修复解决。
我使用 scss 媒体查询来解决这个问题。
@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;
}
}
目前 PWA 没有一个整体的工作解决方案,我认为 CSS 方法不是很令人满意。
但是你可以使用ScreenOrientation API which will work for all browser except Safari and Edge (mobile/desktop). Do not use the outdatet Screen API。
如果您打算将 PWA 封装到移动应用程序中,Capacitor or Cordova 等框架将提供一个本地桥接器来访问相应的方向锁定功能。