小程序开发中遇见iphone X适应宽高的问题，这里提供一个方便查询各种手机型号的方法！！

最新推荐文章于 2024-10-10 10:23:50 发布

�MFL

最新推荐文章于 2024-10-10 10:23:50 发布

阅读量453

点赞数

分类专栏：小程序自适应方法文章标签： javascript

本文链接：https://blog.youkuaiyun.com/mafeilong618/article/details/108447603

版权

小程序自适应方法专栏收录该内容

1 篇文章

订阅专栏

在开发小程序时，遇到背景图在iPhone X等有刘海屏手机上错位的问题。通过在全局app.js中定义查询手机型号的方法，根据手机型号判断顶部间距，确保元素正确对齐。在页面启动时打印手机型号，并设置相应的top值，无刘海手机为20，有刘海手机为40。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

我在开发小程序中遇见一个问题是这样的，页面背景需要铺满一整张背景图，因为背景图有专属位置需要排列，我这设置的都是没有头部导航的，所有元素都是从顶部开始排列，一般没有刘海的手机都可以正常适配，但是有刘海的手机就会错位，下面上解决问题的代码！
可以在全局app.js中定义查询手机型号的方法：

wx.getSystemInfo({
			success: function(res) {
				that.globalData.screenWidth = res.screenWidth;
				that.globalData.screenHeight = res.screenHeight;
				console.log(res,'我是查看手机型号方法')
				if (res.model.search("iPhone X") != -1) {
					that.globalData.iphone = true;
				}
				if (res.model.search("MI 8") != -1) {
					that.globalData.iphone = true;
				}
			}
		});