小程序如何获取屏幕宽度？四种方法详解

在小程序开发中，wx.getSystemInfoSync 是最直接、最常用的同步获取屏幕信息的方法。它是一个同步 API，调用后会立即返回一个包含设备系统信息的对象，开发者可以直接从中提取屏幕宽度。

其核心用法如下：

const systemInfo = wx.getSystemInfoSync;
const screenWidth = systemInfo.screenWidth;
console.log('屏幕宽度为：', screenWidth);

此方法返回的对象包含以下与屏幕相关的关键属性：

• screenWidth: 屏幕宽度，单位px。
• screenHeight: 屏幕高度，单位px。
• windowWidth: 可使用窗口宽度，单位px。
• windowHeight: 可使用窗口高度，单位px。

提示：screenWidth 代表整个设备的屏幕物理宽度，而 windowWidth 是除去导航栏、选项卡等界面元素后的可用内容区域宽度，在布局时需根据场景选择。

使用 wx.getSystemInfo 异步获取

与同步方法相对应，小程序也提供了 wx.getSystemInfo 异步接口来获取系统信息。该方法通过回调函数返回结果，适用于不希望阻塞主线程的场景。

基本代码示例如下：

wx.getSystemInfo({
success: (res) => {
const screenWidth = res.screenWidth;
console.log('异步获取的屏幕宽度：', screenWidth);
},
fail: (err) => {
console.error('获取系统信息失败：', err);
});

异步方法的优势在于它不会阻塞后续 JavaScript 代码的执行。在处理复杂逻辑或需要从多个来源获取数据时，使用异步回调可以保持页面的流畅性。

通过 onResize 监听屏幕尺寸变化

对于需要动态响应屏幕旋转或窗口尺寸改变的应用，小程序提供了 wx.onWindowResize 监听器。这对于实现响应式布局至关重要。

设置监听器的代码如下：

wx.onWindowResize((res) => {
console.log('窗口尺寸变化，新的窗口宽度：', res.size.windowWidth);
// 可以在此处更新UI布局
})

当用户旋转设备或小程序窗口尺寸发生变化时，回调函数会被触发。返回的 res.size 对象中包含 windowWidth 和 windowHeight，分别表示变化后的可使用窗口宽度和高度。

需要注意的是，为了避免内存泄漏，当页面或组件卸载时，应使用 wx.offWindowResize 移除监听。

在 WXML 中使用 RPX 单位进行响应式布局

除了在 JavaScript 中获取像素值，小程序独特的 RPX 单位本身就是一种基于屏幕宽度的响应式解决方案。RPX 可以根据屏幕宽度进行自适应，无需开发者手动计算。

RPX 的换算规则是：1rpx = 屏幕宽度 / 750。这意味着在设计稿宽度为 750rpx 时，元素在所有屏幕上的显示比例是一致的。

例如，将一个视图的宽度设置为屏幕一半，可以直接在 WXML 中编写：

这个视图的宽度是屏幕的一半

下表对比了不同屏幕宽度下 375rpx 对应的实际像素值：

这种方法极大地简化了响应式样式的编写，是小程序开发中的最佳实践之一。