<meta name="viewport" content="width=device-width,user-scalable=no"/>
width - viewport的宽度
height - viewport的高度
initial-scale - 初始的缩放比例
minimum-scale - 允许用户缩放到的最小比例
maximum-scale - 允许用户缩放到的最大比例
user-scalable - 用户是否可以手动缩放
如果不想让页面缩放,可以直接 user-scalable = no
会出现下面效果
当分辨率辩护时,页面固定大小不会一直缩放
如果不加这个属性,会是下面的效果
整个页面会跟着一起缩放
简单demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>Document</title>
<style>
.box {
width: 100%;
min-width: 2000px;
height: 500px;
background: url('https://gw.alipayobjects.com/mdn/rms_2646e9/afts/img/A*9aNWQ7nnNEYAAAAAAAAAAAAAARQnAQ') no-repeat center/cover;
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
需要设置你想要的不缩放的宽度,也就是最小宽度。