要实现uni-app横竖屏适配，需从页面配置、布局调整和平台差异三方面入手。1.通过pages.json设置pageorientation控制屏幕方向；2.使用flex布局、媒体查询或动态计算实现响应式布局；3.注意滚动行为、视频播放、生命周期及导航栏等平台差异问题并针对性处理。
在开发uni-app应用时，横竖屏切换适配是一个容易被忽略但又非常关键的细节。尤其在一些需要全屏展示或视频播放的场景中，屏幕方向的变化可能直接影响用户体验。要实现良好的横竖屏适配，不仅需要处理好页面布局的响应式设计，还要注意不同平台的行为差异。
以下从几个实际使用角度出发，给出一些实用的适配方案和注意事项。
如何设置页面支持横竖屏
uni-app本身支持通过页面配置文件（pages.json）来控制页面是否允许旋转。你可以在
globalStyle或具体页面的
style中设置：
{
"style": {
"navigationBarTitleText": "测试页面",
"usingComponents": true,
"disableScroll": false,
"h5": {
"target": "pc"
},
"pageOrientation": "auto" // 可选值：auto / portrait / landscape
}
}portrait
：强制竖屏；landscape
：强制横屏；auto
：根据设备方向自动切换；
注意：并非所有平台都完全支持这个配置，尤其是H5端和部分小程序平台（如微信小程序），需要额外处理。
页面布局如何适配不同方向
屏幕方向变化后，页面布局如果不做适配，可能会出现内容错位、元素重叠等问题。推荐以下几种方式应对：
- 使用flex布局：弹性盒子模型可以更灵活地适应不同屏幕尺寸和方向；
- 媒体查询CSS：针对不同方向写不同的样式；
@media screen and (orientation: portrait) {
.container {
flex-direction: column;
}
}
@media screen and (orientation: landscape) {
.container {
flex-direction: row;
}
}- 动态计算宽高：监听窗口尺寸变化事件，在JS中重新计算布局参数；
onReady() {
uni.onAccelerometerChange(res => {
// 处理方向变化逻辑
});
}不同平台对视口的理解略有不同，特别是小程序端，建议在关键节点打印
uni.getSystemInfoSync()获取实时信息辅助调试。
横竖屏切换时需要注意的问题
在实际项目中，有几个常见的坑需要注意：
- 页面滚动行为不一致：有些平台在横屏时默认禁用滚动条，需要手动开启；
- 视频播放方向问题：如果是在原生组件里播放视频（比如微信小程序video组件），横屏时可能不会自动旋转，需单独处理；
- 页面生命周期触发顺序不同：在某些平台下，屏幕旋转会触发页面重新加载，影响状态保存；
- 自定义导航栏适配困难：横屏时状态栏高度和导航栏宽度可能变化较大，需要特别处理；
如果你的应用中有全屏视频播放、游戏类界面等特殊需求，建议为这些页面单独设置固定方向，并在用户操作时主动锁定屏幕方向。
小结
总的来说，uni-app的横竖屏适配并不复杂，但容易因为平台差异而产生各种小问题。关键是理解各个平台的支持情况，合理使用配置项和响应式布局手段，同时做好兼容性测试。只要在开发初期就考虑到这些点，后期维护起来也会轻松不少。
