meta标签对viewport的设置（移动端适配）

最新推荐文章于 2024-01-02 16:54:17 发布

Linxi~

最新推荐文章于 2024-01-02 16:54:17 发布

阅读量2.1k

点赞数 1

分类专栏： HTML

本文链接：https://blog.csdn.net/qq_45516629/article/details/104822740

版权

1 篇文章

订阅专栏

本文深入解析了浏览器视口的概念，包括布局视口、视觉视口和理想视口的区别，以及如何通过meta标签设置视口，确保网页在不同设备上正确显示。详细介绍了meta标签的属性，如width、height、initial-scale等，帮助开发者理解并应用到响应式网页设计中。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视口：是浏览器显示页面内容的屏幕区域。视口可以分为布局视口（layout viewport）、视觉视口(visual viewport)和理想视口(ideal viewport)。

meta视口标签的主要目的：布局视口的快读与理想视口的宽度一致，即设备有多宽，我们布局的视口有多宽。

常见设置：

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

name=“viewport”：说明当前meta标签是用来设置viewport的属性的，这个属性只有在移动端才会有效。
content=""：进行viewport的设置。
width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。
height：和 width 相对应，指定高度。设置layout viewport 的高度，这个属性对我们并不重要，很少使用
initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。（设置scale值为1.0，那么layout viewport的大小与ideal viewport大小相等：）
maximum-scale：允许用户缩放到的最大比例。
minimum-scale：允许用户缩放到的最小比例。
user-scalable：是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许