在做移动端是,最大的需求就是要适配多端,当拿到UI 的设计稿时,上面的尺寸是这样的
11.jpg
width 和height都是固定的,而且字体大小也是成倍数固定的,比如font-size: 32px;
此时要做的就是适配,按比例动态缩放
<script>
var deviceWidth = parseInt(window.screen.width); //获取当前设备的屏幕宽度
var deviceScale = deviceWidth / 750; //得到当前设备屏幕与750之间的比例,之后我们就可以将网页宽度固定为750px
var ua = navigator.userAgent;
//获取当前设备类型(安卓或苹果)
if (/Android (\d+.\d+)/.test(ua)) {
var version = parseFloat(RegExp.$1);
if (version > 2.3) {
document.write('<meta name="viewport" content="width=750,initial-scale=' + deviceScale + ', minimum-scale = ' + deviceScale + ', maximum-scale = ' + deviceScale + ', target-densitydpi=device-[图片上传中...(433.jpg-7f5c29-1590044775526-0)]
dpi">');
} else {
document.write('<meta name="viewport" content="width=750,initial-scale=0.75,maximum-scale=0.75,minimum-scale=0.75,target-densitydpi=device-dpi" />');
}
} else {
document.write('<meta name="viewport" content="width=750, user-scalable=no, viewport-fit=cover">');
}
</script>
直接将代码引入,即可适配多端,而此时css中的width和height可以尽情的使用px

注意一下:代码中的750,就是第一张UI设计稿的width
此外,苹果的安全距离可以通过在meta中的content追加viewport-fit=cover
,并在页脚的fixed按钮组的样式中的height改为对应带constant和env处理过的:
.footerButton {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
flex-wrap: nowrap;
justify-content: flex-start;
text-align: center;
line-height: 3;
padding: 32px 30px;
background-color: #FFFFFF;
// 此处开始重点
height: 144px;
box-sizing: content-box;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom)
}
并且向上滑动时,页面的底部追加一段安全距离div:
.safebottom {
height: 144px;
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
注:设置 box-sizing: content-box; ,因为在通常情况下 css 在 reset 阶段一般都设置了 * {box-sizing: border-box;} 这样一来设置 padding 就不能向外扩展距离了,所以在这里我们要把他改回 content-box
网友评论