uniapp 禁止横屏

问题介绍

uniapp 是一款跨平台的开发框架，旨在通过一套代码实现多个平台的应用开发。在某些情况下，我们可能希望禁止横屏，只允许应用在竖屏下运行。那么，在使用 uniapp 开发应用时，我们该如何实现禁止横屏的功能呢？

解决方案

要实现禁止横屏的功能，我们可以通过修改 manifest.json 文件和使用 CSS 样式来实现。

首先，我们需要在项目根目录下的 manifest.json 文件中添加如下代码：

{
  "display": "portrait"
}

这样，当我们运行应用时，系统会强制将应用显示为竖屏模式。

另外，我们还可以通过 CSS 样式来限制应用的横屏行为。在 App.vue 文件或对应的页面文件中的 style 标签中，添加以下 CSS 代码：

@media screen and (orientation: landscape) {
  html,
  body {
    overflow: hidden;
    transform: rotate(90deg);
    transform-origin: right top;
    width: 100vh;
    height: 100vw;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #ffffff;
  }
}

上述代码通过媒体查询，当屏幕方向为横屏时，对 html 和 body 元素应用一系列的样式。具体样式包括将页面旋转90度、限制页面滚动和设置页面大小，从而实现禁止横屏的效果。

代码解析

让我们来解析一下上述的 CSS 代码：

• @media screen and (orientation: landscape)：媒体查询，表示当屏幕方向为横屏时应用下面的样式。
• html, body：选择器，表示对 html 和 body 元素应用样式。
• overflow: hidden：隐藏内容溢出部分。
• transform: rotate(90deg)：将页面旋转90度。
• transform-origin: right top：设置旋转的基点为右上角。
• width: 100vh; height: 100vw：将页面的宽度设置为视口的高度，高度设置为视口的宽度，从而使页面沿着旋转后的方向填充整个视口。
• position: absolute; top: 0; left: 0：将页面定位到左上角。
• background-color: #ffffff：设置页面的背景色为白色。

总结

通过修改 manifest.json 文件和使用 CSS 样式，我们可以实现 uniapp 应用的禁止横屏功能。manifest.json 文件的修改可以让系统强制将应用显示为竖屏模式，而 CSS 样式的设置可以限制应用的横屏行为。通过这种方式，我们可以更好地控制应用的运行环境，提升用户体验。