开发教程与代码示例

入门

小程序框架

小程序运行时

自定义组件

基础教程

能力教程

流量入口

通用能力

推广变现

经营能力

行业能力

AI/AR 能力

性能优化

安全

小程序大屏适配指南

我的收藏

简介

为了保障小程序在折叠屏、Pad 设备上的交互体验，小程序在基础库 3.63.0 版本支持大屏设备上展示适配能力。

本文 CodeLabs 将聚焦在大屏设备展示适配规则和能力接入部分。

说明
本能力目前处于灰度阶段，线上用户部分可见，将在能力推全后移除本说明。

适配效果展示

容器样式

说明

小程序基础库 3.63.0 版本前，大屏设备会按照撑满屏幕方式展示。

3.63.0 版本后，根据开发者配置的进阶模式开关，将按照以下内容样式规则展示。

默认样式：小程序内容居中两侧留白，可绘制区域尺寸按手机设备通用尺寸等比拉伸，保证小程序内容兜底展示样式。

进阶样式：小程序内容居中两侧留白，提供宽屏的内容绘制区域，开发者可通过平台适配工具在大屏设备上进行更丰富的内容呈现。

页面尺寸规则

	设备宽度	[0, 599]	[600, 703]	[704, 1023]	1024+
默认方案	适配规则	充满屏幕	页面高度：充满屏幕页面宽度= min( 屏幕宽度, 屏幕高度 * 375 / 812 )	页面高度：充满屏幕页面宽度= min( 屏幕宽度, 屏幕高度 * 375 / 812 )	页面高度：充满屏幕页面宽度= min( 屏幕宽度, 屏幕高度 * 375 / 812 )
默认方案	示意图
进阶方案	适配规则	充满屏幕	充满屏幕	页面高度：充满屏幕页面宽度= 540	页面高度：充满屏幕页面宽度= 620
进阶方案	示意图

进阶模式开关

开启进阶模式

在 Pad、折叠屏等大屏设备上运行的小程序可通过在app.json中添加"resizable": true" 来开启大屏适配进阶模式，参考小程序配置的app.json部分。

{
    "resizable": true
}

rpx布局

rpx 为小程序提供的响应性单位，可以根据屏幕宽度进行自适应，帮助快速适配多屏场景。推荐使用 rpx 单位进行大屏场景的适配，详见rpx。

监听页面尺寸变化

开发者可通过 Page.onResize 页面生命周期事件来感知屏幕旋转事件及相关的页面尺寸变化，详情可参考响应显示区域变化

Page({ 
  onResize(res) {
    res.windowHeight; // 新的显示区域高度
    res.windowWidth; // 新的显示区域宽度
    res.screenRatio; // 全屏及分屏状态
    res.interactive; // 当前页面是在拖动中/停止拖动
    res.orientation; // 当前页面屏幕朝向
  },
});

match-media

match-media 为媒体查询组件。可以指定一组媒体查询规则，满足时，这个组件节点才会被展示。详见 match-media。

tt.matchMedia

tt.matchMedia 支持判断当前页面状态是否满足指定的媒体查询条件，例如当前页面大小是否在指定的某个范围内。详见 tt.matchMedia。

MediaQueryObserver

MediaQueryObserver 为媒体查询监听器。在页面或组件中使用this.createMediaQueryObserver()函数，获取 MediaQueryObserver 实例，用于进行页面媒体查询（Media query）。详见 MediaQueryObserver。

栅格化布局组件：row/col

我们提供了 24 栅格布局组件。栅格化布局组件提供了响应式布局特性，帮助开发者快速适配多屏适配。详见栅格化布局组件。