1. uniapp 是什么？
uniapp 是一款基于 Vue.js 的框架，它可以同时支持编译出小程序、H5 等多个平台的应用。它在保证开发效率的同时，还给予了开发者更多选择的自由度，使得开发者可以更加专注于业务逻辑的实现。
uniapp 可以实现一次编写，多端输出，大大提高了开发效率，同时不牺牲应用的性能与用户体验。
2. uniapp 如何禁止横屏
2.1 阻止横屏的方法
uniapp 中禁止横屏的方法很简单，只需要在 H5 应用中在 title 标签中加入以下代码即可：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
这段代码中 content 属性中的 user-scalable=0 表示禁止用户在 H5 中缩放界面。
2.2 阻止横屏的实现方式
但是，在很多情况下，我们并不仅仅是想禁止用户横屏，我们希望可以真正意义上的阻止横屏，这个时候可以通过监听设备方向，来判断当前是横屏或竖屏，并相应的禁止横屏。下面是一个示例：
export default {
mounted() {
window.addEventListener("orientationchange", this.handleOrientaionchange); // 监听设备方向变化事件
this.handleOrientaionchange()
},
beforeDestroy() {
window.removeEventListener("orientationchange", this.handleOrientaionchange) // 注销监听事件
},
methods: {
handleOrientaionchange() {
if (window.orientation === 90 || window.orientation === -90) {
this.isLandScape = true
} else {
this.isLandScape = false;
}
},
},
}
上述代码通过监听设备方向的变化，来判断当前设备是否处于横屏状态。如果是，则将 isLandScape 设置为 true，并禁止横屏；否则将其设置为 false。
3. uniapp 中横屏问题的注意点
3.1 H5 中浏览器兼容性问题
需要注意的是，在 H5 应用中，浏览器的兼容性问题。H5 应用可能会在不同的浏览器中有不同的效果。可以通过在 nvue 中书写原生代码或使用插件实现相应的功能。
同时，在 iOS 系统下，若用户在 Safari 中进入应用后翻转设备，系统会判断应用是由用户主动打开，因此不会触发方向切换事件。
3.2 H5 中使用插件可能会降低性能
在 uniapp 中使用插件可以方便地解决一些问题，但同时会降低程序性能。在实际开发中，需要根据具体情况酌情使用。
4. 总结
在 uniapp 中，禁止横屏可以通过简单地在 H5 应用中添加元数据来实现。如果我们需要完全阻止设备横屏，可以通过监听设备方向变化来判断当前方向，并禁止横屏。
需要注意的是，在常见 H5 平台下，可能会存在兼容性问题或者性能问题。同时，在 iOS 系统中，系统判断应用是由用户主动打开，不会触发方向切换事件。