前
端的冷知识：了解viewport Viewport 是指浏览器可视区域，通常我们认为这是浏览器窗口。然而它不止就这么简单，它是一个相对于 CSS 布局的环境区域。 viewport 的大小和位置可以在浏览器中通过调整窗口大小等操作动态改变。这也意味着页面适应能力的问题。如果无法控制 viewport，那么在手机等不同设备上展示的效果就会非常难以确定。 因此，我们需要控制 viewport 的大小，以便网站在不同设备上呈现出相同的效果。现在的三个 viewport 的相关标签分别是： ```html ``` 通过设置 viewport 的 width 为 device-width，页面便可以根据不同设备（如手机、平板、PC）的屏幕宽度进行缩放。 这个标签的作用很明显，它告诉浏览器页面宽度为设备宽度，并设置 viewport 的初始缩放比例为 1。 在不同设备中进行缩放，尤其是在移动设备中，可能非常快速，因为浏览器会自适应页面设计并缩放内容以适应设备宽度。 ```html ``` 这个标签告诉浏览器，页面宽度为设备宽度，初始缩放比例为 1，最小缩放比例也为 1，最大缩放比例为 1，同时限制了页面无法缩放。 用户无法通过页面的 touch、double-tap 等手势来改变缩放比例，防止页面被恶意缩放而影响用户体验。 ```html ``` 在这个标签中，最大缩放比例没有被限制。这也就是说用户可以在页面上进行缩放，但最小缩放比例为 1，防止页面变得过小难以使用。 除了这三个 viewport 的设置方式，还有其他的优化策略可以用到。比如图片的自适应显示、字体大小的自适应控制等等。 viewport 是网页自适应的重要组成部分，了解 viewport 可以帮助我们更好地掌控页面的显示效果，满足不同设备的用户需要。