问题:在一整个页面上设置一个背景图片,在背景图片上放一个透明盒子。在不同型号的手机上透明盒子的位置发生变化。
问题原因:
在开发uniapp项目中我们往往用到的单位是rpx。但是用户的手机型号是不同的。如果我们直接给盒子固定的高度时。那么图上每个用户在手机上看到的界面就会发生偏差。为了让我们的界面适配每个型号的手机。那我们要怎么适配不同型号的手机呢?
主要原理:
我们需要获取到手机的可用屏幕的宽和高
uni.getWindowInfo()
let a = uni.getWindowInfo();//官方获取用户设备信息的方法
let b=a.windowWidth;//可用屏幕的宽
let c=a.windowHeight;可用屏幕的高
let d=750(b/c);//获取到的是通过比例转换的高度
解决方法:
1、将获取到的高度,赋值给最大的盒子
html代码
<view class="background_box" ref="screen" :style="{height:sss+'rpx'}">
js代码
data() {
return {
sss: "",}
onLoad() {
let a = uni.getWindowInfo();//官方获取用户设备信息的方法
let b=a.windowWidth;//可用屏幕的宽
let c=a.windowHeight;可用屏幕的高
let d=750(b/c);//获取到的是通过比例转换的高度
this.sss = d;
}
2、用算出来的高度减去固定的高度就可以算出透明盒子的高度。并且在每个手机上展现出来的页面的位置不会发生变化。