为什么要使用视口值HTML 中的标记？

在移动设备上，HTML 页面在不同的屏幕尺寸上可能会有不同的展示效果，这使得开发者需要对不同屏幕尺寸编写不同的 CSS 样式，而且还需要考虑不同设备的像素密度。这时，为了更好的适应各种不同的屏幕尺寸，使用视口值HTML 标记就显得十分必要了。

视口是指设备屏幕上用于显示 Web 内容的区域。手机可视区域的宽度和高度是基于设备的物理尺寸和像素密度计算出来的。为了维持页面在不同设备间的显示效果并使其更具优化性，我们需要定义适当的视口。

定义视口

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

这是一个定义视口的例子。其中包含两个内容：

• width=device-width：表示将设备屏幕的宽度设置为当前文档的宽度。
• initial-scale=1.0：表示页面的初始缩放比例为 100%。这个值可以更改，让页面在不同屏幕尺寸上更完美地展示。

避免缩放导致布局错乱

在移动设备上，用户可以通过双指缩放来放大或缩小页面，在一些情况下，这可能会导致整个布局错乱。为了避免这种情况的出现，可以在 viewport 中添加一个属性 user-scalable=no。

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

这个标记将禁用用户缩放网页视口。

媒体查询

在 CSS 中，媒体查询是一种用于针对不同媒体类型和设备特性来定义不同样式的方法。使用视口标记可以为 CSS 媒体查询提供更准确的信息，使其能够更好地针对设备屏幕进行优化。

@media screen and (max-width: 640px) {
  /* 在宽度小于等于 640px 的屏幕上适用的样式 */
}

总结

以上代码片段以及介绍说明了使用视口值HTML 标记的原因和作用。通过设置正确的视口值可使网站在移动设备上获得最佳的显示效果，并且能让 CSS 更好地适应不同屏幕尺寸。