微信小程序默认锁定竖屏。想要横屏显示，必须在 app.json 或页面的 json 配置里显式开启。这是很多开发者第一次做横屏小程序踩的坑。

第一步：开启横屏。

{
  "pageOrientation": "auto"
}

auto 表示跟随系统旋转。landscape 表示强制横屏。可以配置在 app.json 的 window 里，也可以只对某一个页面生效（写在页面 json 里）。

第二步：处理横屏下的布局。

横屏时，屏幕的宽高会互换。原本的 375×667 变成 667×375。你的所有响应式规则都要重新审视：

• rpx 的基准变了：横屏时 750rpx 对应的是屏幕高度还是宽度？微信的规则是 750rpx 始终对应屏幕宽度，但横屏下屏幕宽度变大了，所以同一元素会显得更宽。
• 安全区位置变了：竖屏时顶部安全区在灵动岛附近，横屏时安全区跑到了左侧或右侧。
• flex 布局可能要改方向：竖屏时竖排的卡片，横屏时改成横排更合理。

第三步：用媒体查询区分横竖屏。

@media (orientation: landscape) {
  .card-list {
    flex-direction: row;
  }
}

@media (orientation: portrait) {
  .card-list {
    flex-direction: column;
  }
}

第四步：安全区适配。横屏下 iOS 的 Home Indicator 在屏幕底部（竖屏时也在底部），但刘海/灵动岛跑到了屏幕左侧，会导致左侧内容被遮挡。用 env(safe-area-inset-left) 补齐。

在下方预览器输入小程序 H5 页面地址，同时对比竖屏和横屏，检查切换时的布局稳定性。