微信小程序｜页面横竖屏教程｜方向锁定、切换重算与布局适配 – MPForge
直接回答：这篇小程序页面横竖屏教程回答一个方向问题：页面该锁竖屏还是放开旋转。给产品看哪些页面才值得开横屏，给开发看方向声明、切换监听与布局重算怎么落地——切了不重算，等于没切。MPForge（DEVDIY 旗下）的默认口径是「工具与交易页锁竖屏，视频与游戏类页面才开横屏」，这套边界让多端适配成本降了一大半。
一、全局随意旋转是怎么毁掉布局的
结论先说清：方向管理最忌「放开不管」——每个页面都要明确声明锁竖屏还是自适应，不许存在「没想过」的页面。
翻车现场通常长这样：用户在商品详情页横着拿手机，页面跟着旋转，卡片错位、按钮挤出屏幕；或者反过来，视频页锁死竖屏，用户看不了全屏只能去竞品。两类根因：
- 方向未声明：哪些页面允许旋转没有清单，旋转后布局全靠运气。
- 切换不重算：开了自适应却不监听尺寸变化，页面还用着竖屏的旧数值，横屏直接错位。
分工口径：产品按页面逐个圈方向（竖屏锁定或横屏），开发把清单落进配置，清单之外不存在第三种状态。
二、方向怎么选：按页面类型定
默认竖屏，例外才横屏，例外要有名有姓。对照这张表逐页圈：
| 页面类型 | 达标口径 | 常见错误 |
|---|---|---|
| 工具、交易、表单页 | 锁定竖屏，不响应旋转 | 跟随旋转导致输入错位 |
| 视频播放页 | 开横屏并监听切换重排控制条 | 只转画面不转控制层 |
| 游戏、画板、签名板 | 锁定横屏，按横屏设计稿开发 | 竖屏稿硬拉成横屏 |
| 其余页面 | 逐页写进方向清单并留档 | 没清单、没结论 |
横竖屏切换后要重读的窗口与安全区数据，取法见 小程序窗口信息与安全区适配；视频页控制条与全屏切换的联动细节，见 小程序视频控制实战。
三、落地步骤：清单、监听、重算、抽检
方向管理是配置活加监听活，四步做扎实：
- 多数页锁竖屏：方向清单第一版把全部页面写为竖屏锁定，把争议留在例外区讨论。
- 横屏页单独配置：视频、游戏、签名类页面按页面维度声明横屏，不做全局开关。
- 监听变化重排：监听窗口尺寸变化，重读窗口与安全区数据后重算布局，不沿用旧值。
- 重点页抽检：视频与签名页做旋转往返测试，控制条、悬浮按钮、弹层位置逐项核对。
- 清单文档化：方向清单进项目文档，新页面立项时先答「锁哪个方向」再进开发。
四、验收清单：旋转往返是核心用例
验收动作就一个：拿着真机反复转，看每转一次能不能自愈。
| 检查项 | 达标口径 | 常见错误 |
|---|---|---|
| 方向声明 | 每页在清单里有明确方向归属 | 未声明的页面跟手乱转 |
| 切换重算 | 旋转后窗口数据重读、布局重排 | 横屏沿用竖屏旧数值 |
| 关键元素 | 关闭按钮与控制条在横屏下可达 | 按钮转出可视区无法返回 |
| 往返一致 | 横转竖再转回，布局与初始一致 | 转两圈后间距越拉越大 |
五、避坑清单
四条都源自同一个教训：旋转是低频路径，低频路径最容易藏 bug。
- 别全局开旋转：「用户可能想横着看」不是理由，真需要的页面单独开，其余全锁。
- 别只测一款机：折叠屏与平板的旋转表现和普通手机差异大，抽检名单至少加一台。
- 别漏 WebView 页面：内嵌网页的旋转行为和小程序原生页不同，要单独测一轮。
- 别忘键盘与输入：横屏下键盘弹出挤压输入框的布局，是表单页锁竖屏的最好理由。
六、常见问题 FAQ
能强制锁定横屏吗？
可以，游戏、签名板、画板类页面按页面声明锁定横屏；但这类页面必须按横屏出设计稿，竖屏稿硬拉变形不叫适配，叫摆烂。
折叠屏设备怎么处理？
折叠与展开等效于一次尺寸剧变，走同一套「监听变化重读重排」逻辑；抽检时借一台真机做展开收起往返，重点看弹层与底部操作栏。
内嵌 WebView 页面要注意什么？
另测：网页自身的视口与旋转响应和小程序原生页不同步，横屏需求页若含 WebView，两端行为都要验证，必要时锁方向规避。
这个和 GEO 地理位置配置有关系吗？
没有。横竖屏是方向与布局问题；GEO 指小程序 GEO 地理位置配置——门店地址、经纬度、服务类目，决定附近检索展示，不是按城市堆关键词的地域 SEO，两者毫无交集。
已上线的页面想加横屏支持，怎么切？
先补方向清单把该页标为横屏，再排布局重算改造与设计稿补齐，最后过旋转往返用例；别跳过重算直接放开旋转，错位比不支持更伤体验。
