微信小程序：适配手机屏幕宽高度的设置方法

2024-06-23 10:52| 来源: 网络整理| 查看: 265

我们在做小程序页面时常常会需要设置背景，而不同手机的屏幕宽高度并不一样，虽然设置宽度为750rpx来解决宽度自适应的问题，但高度却没有这种方法，下面来简单介绍一下设置高度自适应的方法：

一、750rpx自适应宽度

rpx是小程序自带的衡量尺寸，可以根据屏幕宽度进行自适应，750rpx则设定为手机页面宽度。而不同的手机屏幕大小750rpx对应的px不同，如iphone6的宽度是375px，在iphone6的小程序中750rpx就等于375px。故一般在wxss中设置

width：750rpx;

即可解决宽度自适应

二、设置自适应高度 1、首先在页面的js中定义变量 let SCREEN_WIDTH = 750 let RATE = wx.getSystemInfoSync().screenHeight /wx.getSystemInfoSync().screenWidth

其中getSystemINofSync()可以让系统返回屏幕高度

2、在js下的page中定义data Page({ data: { ScreenTotalW: SCREEN_WIDTH, ScreenTotalH: SCREEN_WIDTH * RATE, }， 3、wxml中使用

【本文地址】

公司简介

联系我们