1、meta视口标签
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes, maximum-scale=1.0, minimum-scale=1.0">
-
width=device-width
: 这个属性告诉浏览器将视口宽度设置为设备的宽度,这样页面会填充整个设备屏幕的宽度,不会有水平滚动条。 -
initial-scale=1.0
: 这个属性设置了页面的初始缩放级别,即页面加载时的缩放比例。将其设置为 1.0 表示页面以原始大小显示,没有缩放。 -
user-scalable=yes
: 这个属性控制用户是否能够手动缩放页面。将其设置为 "yes" 表示用户可以手动缩放页面。 -
maximum-scale=1.0
: 这个属性设置了用户能够手动缩放的最大比例。将其设置为 2.0 表示用户最多可以将页面放大到原始大小的两倍。 -
minimum-scale=1.0
: 这个属性设置了用户能够手动缩放的最小比例。将其设置为 0.5 表示用户最多可以将页面缩小到原始大小的一半。