在uniapp中h5端全屏横屏

### 实现 UniApp H5 端全屏横屏展示的方法 #### 使用 iframe 解决方案 对于视频播放场景，可以直接采用 `iframe` 来嵌入外部资源。这种方式不仅简化了代码逻辑，还能够很好地支持移动端浏览器中的横竖屏切换功能[^2]。 ```html <template> <div class="video-container"> <!-- 使用 iframe 嵌入视频 --> <iframe :src="videoUrl" frameborder="0" allowfullscreen></iframe> </div> </template> <script> export default { data() { return { videoUrl: 'https://example.com/video.mp4' } } } </script> <style scoped> .video-container { width: 100%; height: 100vh; } iframe { width: 100%; height: 100%; } </style> ``` #### 利用 CSS 和 JavaScript 控制页面方向 如果希望整个页面能够在特定条件下进入横屏模式，则可以通过监听窗口尺寸变化或用户交互行为来动态调整页面的方向设置[^1]。 ```javascript // 在 mounted 生命周期钩子函数内执行 mounted () { window.addEventListener('resize', this.handleResize); }, methods: { handleResize(event) { const isLandscape = window.innerWidth > window.innerHeight; if (isLandscape) { document.documentElement.style.transform = 'rotate(90deg)'; document.body.classList.add('landscape'); } else { document.documentElement.style.removeProperty('transform'); document.body.classList.remove('landscape'); } }, }, ``` 需要注意的是，在实际应用中可能还需要考虑不同设备之间的兼容性差异以及用户体验优化等问题。 #### 结合 Plus API 进行更精细控制 当涉及到更加复杂的业务需求时（如需配合其他插件），则可以借助于 `plus.screen.lockOrientation()` 方法锁定屏幕方向为横向，并通过相应的事件监听机制完成对播放状态的管理[^3]。 ```javascript import { onMounted, ref } from 'vue'; onMounted(() => { let playerInstance = null; // 初始化 DPlayer 或者其他第三方库实例... // 绑定全屏事件处理程序 playerInstance.on('fullscreen', function(){ plus.screen.lockOrientation('landscape-primary'); }); // 绑定退出全屏事件处理程序 playerInstance.on('fullscreen_cancel', function(){ plus.screen.lockOrientation('portrait'); }); }); ``` 以上几种方法可以根据具体的应用场景灵活选用，从而达到理想的视觉呈现效果。