站三界导航
首页 uniapp代码uniapp微信小程序获取屏幕宽高

uniapp微信小程序获取屏幕宽高

  • uniapp代码
  • 来源:站三界导航
  • 51阅读
  • 2023-03-17

uniapp开发微信小程序的时候,有时候去调整样式

你需要适配各种手机屏幕,使用,你的样式宽高就不能使用rpx  

有的朋友觉得可以使用vw  vh  %   是的,当然可以

但是要让你的元素,宽高,比如50%再去加上20rpx  怎么做

所以这时候就要去获取不同手机页面屏幕的宽高

如何获取手机屏幕宽高

1.使用uni.getWindowInfo()

	        // 获取窗口信息
			let getWindowInfo = uni.getWindowInfo()
			console.log(getWindowInfo.screenHeight);//屏幕高度
			console.log(getWindowInfo.screenWidth);//屏幕宽度
			console.log(getWindowInfo.windowHeight);//可操作页面高度
			console.log(getWindowInfo.windowWidth);//可操作页面宽度
			console.log(getWindowInfo);
			console.log('获取窗口信息');

2.使用uni.getSystemInfo()

		    // 系统信息的概念
			uni.getSystemInfo({
				success: res => {
					console.log(res);
					console.log(res.screenHeight);//屏幕高度
					console.log(res.screenWidth);//屏幕宽度
					console.log(res.windowHeight);//可操作页面高度
					console.log(res.windowWidth);//可操作页面宽度
				}
			})


当然除了需要手机屏幕和可操作区域宽高外,有时候,你还需要去获取手机的型号

使用  uni.getDeviceInfo()

			let getDeviceInfo = uni.getDeviceInfo()
			// 获取设备基础信息
			console.log(getDeviceInfo);
			console.log('获取设备基础信息');

注意

这些方法可以获取到的属性并不只能获取宽高

还可以去获取很多你需要的属性

我在这里着重的写一下获取宽高的

本文结束
本文来自投稿,不代表站三界导航立场,如若转载,请注明出处:https://www.zhansanjie.com/article/details/40295.html

版权声明:

1、本文系转载,版权归原作者所有,旨在传递信息,不代表看本站的观点和立场。

2、本站仅提供信息发布平台,不承担相关法律责任。

3、若侵犯您的版权或隐私,请联系本站管理员删除。

4、本文由会员转载自互联网,如果您是文章原创作者,请联系本站注明您的版权信息。

分享
站三界导航
本站声明:本站严格遵守国家相关法律规定,非正规网站一概不予收录。本站所有资料取之于互联网,任何公司或个人参考使用本资料请自辨真伪、后果自负,站三界导航不承担任何责任。在此特别感谢您对站三界导航的支持与厚爱。