奇思乎乎乎 iPhone 16e · 17 系列 · Air - 一束网址,折射万屏
100%

输入网址,立刻开始预览

预设:
自定义:

抖音小程序横屏适配

抖音小程序在开发横屏应用(如小游戏、视频播放器、数据看板)时,和微信小程序类似,需要在配置中开启 pageOrientation。

第一步:开启横屏。在 `app.json` 或页面的 json 中配置 `"pageOrientation": "auto"`(跟随系统)或 `"landscape"`(强制横屏)。

第二步:处理分辨率差异。抖音小程序的 rpx 计算规则是 `750rpx = 屏幕宽度`。但在横屏下,屏幕宽度变成了原设备的高度(例如 844px),这会导致你的整个页面被拉得非常大。

第三步:避开底部安全区。在横屏下,抖音的点赞、评论等原生 UI 会跑到右侧或底部,这会挤压你的应用空间。务必使用 `env(safe-area-inset-bottom)` 及 `safe-area-inset-left/right` 做留白处理。

你可以用本预览工具,选择“横屏”设备,测试你的 H5 页面在翻转时的响应式表现。

常见问题

抖音小程序横屏时 rpx 怎么算?
和竖屏一样,750rpx 始终等于当前屏幕的较短边(即实际宽度)。横屏时,rpx 会基于屏幕高度重新计算。
横屏下的 Safe Area 怎么做?
横屏时 iPhone 的刘海会跑到左侧,底部横条会跑到右侧。需要用 env(safe-area-inset-left) 和 env(safe-area-inset-right) 做 Padding。

相关工具