使用 viewport 来控制移动端页面宽高,缩放等展示效果

现在的移动端开发页面已经离不开 <meta name="viewport"> 元素的支持了.

viewport 标签对移动端设备浏览器的宽,高,缩放等属性做了相应的控制:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

现在我们来看下 content包括哪些属性的定义:

width=device-width

默认页面宽度等于 设备浏览器宽度 (device-width)

height=device-height

默认页面高度等于 设备浏览器高度(device-height)

initial-scale=1

initial-scale 属性是为了控制移动端页面是不是要缩放的效果

如果你没有此属性的控制,当你在移动端去浏览pc上的页面时(假设没有适配)

这时移动端设备也是默认按照pc端的展示效果全部呈现在小屏幕上,如果你点击某一个地方时,页面会马上放到几倍,足以让你在移动端浏览器上看清楚,这个放大的效果就是 initial-scale 属性控制的.

如果这里设置为1,说明默认按照1倍效果呈现(不存在放大展示)

maximum-scale=1

此值表示最大放大倍数.

也就是你点击页面局部时,放大几倍显示.

如果这里设置为1.说明点击页面局部是,你不希望它放大展示.