微信小程序开发文档微信小程序大屏适配指南

2024-02-25 开发教程微信小程序开发文档匿名 0℃

大屏适配指南

目前市面上的用户设备大致可分为小屏的手机端、中屏的平板、大屏的 PC 端三类，而在这三类设备中又会有细小的尺寸差别，也称作屏幕碎片化。

随着小程序能够在越来越多的设备终端上运行，开发者也应该针对不同的屏幕尺寸进行相应的适配。

按照一般的适配原则，结合小程序特点，通常在以下三种情况中需要进行适配：

1. 同一类设备下，尺寸有细微差别

使用小程序提供的 rpx单位，在尺寸差别不大的情况下对页面布局进行等比缩放。

2. 在允许屏幕旋转的情况下，可分为横屏与竖屏

手机端设置 "pageOrientation": "auto" 或 iPad 上设置 "resizable": true 时会允许屏幕旋转，此时使用 Page 的 onResize 事件或者 wx.onWindowResize 方法可对该操作进行监听，进而判断是使用横屏还是竖屏布局。

3. 不同类设备或者能够自由拖拽窗口的 PC 小程序

小程序目前是基于 Webview 实现，利用CSS 媒体查询可实时监听屏幕尺寸大小，在不同的屏幕下展现不同的 UI 布局，结合Flex 弹性布局、Grid 网格布局便能实现更加响应式的适配方案。

matchMedia - 抽象式媒体查询

小程序基础库基于 window.matchMedia API 新增了一组过程式与定义式接口 match-media 。开发者可以通过 <match-media></match-media> 和 wx.createMediaQueryObserver 来显式地使用媒体查询能力，对于多端适配来说，它有以下优势：

开发者能够更方便、显式地使用 Media Query 能力，而不是耦合在 CSS 文件中，难以复用。
能够在 WXML 中结合数据绑定动态地使用，不仅能做到组件的显示或隐藏，在过程式 API 中可塑性更高，例如能够根据尺寸变化动态地添加 class 类名，改变样式。
能够嵌套式地使用 Media Query 组件，即能够满足局部组件布局样式的改变。
组件化之后，封装性更强，能够隔离样式、模版以及绑定在模版上的交互事件，还能够提供更高的可复用性。
浏览器内置 API ，能够在所有基于 Webview 的小程序上使用，兼容性良好。 match-media 具体使用方法可参考相关 API 文档。