抖音小程序在开发横屏应用(如小游戏、视频播放器、数据看板)时,和微信小程序类似,需要在配置中开启 pageOrientation。
第一步:开启横屏。在 `app.json` 或页面的 json 中配置 `"pageOrientation": "auto"`(跟随系统)或 `"landscape"`(强制横屏)。
第二步:处理分辨率差异。抖音小程序的 rpx 计算规则是 `750rpx = 屏幕宽度`。但在横屏下,屏幕宽度变成了原设备的高度(例如 844px),这会导致你的整个页面被拉得非常大。
第三步:避开底部安全区。在横屏下,抖音的点赞、评论等原生 UI 会跑到右侧或底部,这会挤压你的应用空间。务必使用 `env(safe-area-inset-bottom)` 及 `safe-area-inset-left/right` 做留白处理。
你可以用本预览工具,选择“横屏”设备,测试你的 H5 页面在翻转时的响应式表现。