uni-app 横屏显示问题 页面只显示一半

uni-app 横屏显示问题 页面只显示一半

测试过的手机

vivo z5x 几率很大 小米8小几率 ios全部只显示一半

示例代码

plus.screen.lockOrientation('portrait-primary');
plus.screen.lockOrientation('landscape-primary');

操作步骤

在某个页面切换横屏只显示一半

预期结果

显示完整页面

实际结果

有记录显示一半

bug描述

app中某个页面切换横屏只显示一半


### 附件
- [材料.zip](http://ask.dcloud.net.cn/file/download/file_name-5p2Q5paZLnppcA==__url-Ly9pbWctY2RuLXRjLmRjbG91ZC5uZXQuY24vdXBsb2Fkcy9xdWVzdGlvbnMvMjAyMTA0MjYvY2JjYzZiNDM0MTUyMzMwODk2OTY5MjAyZTcxNDIzNDU=)

### 图片
![image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210426/fa2b4638216a3945fed00c3d09382b8a.jpg)
![image](https://www.itying.com/uniimg.php?url=https://img-cdn-tc.dcloud.net.cn/uploads/questions/20210426/e05b3f20426d293ea62aadc1dddd17f3.jpg)

更多关于uni-app 横屏显示问题 页面只显示一半的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

真就不管吗

更多关于uni-app 横屏显示问题 页面只显示一半的实战教程也可以访问 https://www.itying.com/category-93-b0.html


大佬解决了吗？

回复 三丰: 我换h5+重写了

回复 2***@qq.com: 大佬，能弄出来代码学习一下吗？

这是一个常见的横屏适配问题。问题可能出现在以下几个方面：

  1. CSS适配问题：横屏后页面宽度变为屏幕高度，需要重新调整布局样式。建议使用响应式布局方案：
@media screen and (orientation: landscape) {
  /* 横屏样式调整 */
  .container {
    width: 100vh;
    height: 100vw;
    transform: rotate(90deg);
  }
}
  1. 视口配置：检查pages.json中该页面的配置，确保支持横屏：
{
  "path": "pages/your-page",
  "style": {
    "orientation": ["landscape", "portrait"]
  }
}
  1. 代码执行时机：横屏切换代码需要在页面完全加载后执行，建议放在onReady生命周期中：
onReady() {
  plus.screen.lockOrientation('landscape-primary');
}
  1. 安全区域适配：横屏时需要处理刘海屏、安全区域等问题，可以使用uni-app的安全区域CSS变量：
.safe-area {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
回到顶部