为什么要在 <head> 元素内添加 meta viewport 标签？（附示例）
你有没有想过为什么需要添加：
<meta name="viewport" content="width=device-width, initial-scale=1">
标签内部<head>以及它的用途是什么？
你来对地方了！
例子
首先，请在新标签页中打开此网页：http://www.pakistan.gov.pk/
打开开发者工具，并在浏览器中启用设备模式。此模式模拟 Web 应用在移动设备上的行为。请注意，页面已缩小以适应屏幕的固定宽度内容。这并非良好的用户体验，因为内容对于大多数用户来说可能太小，迫使他们缩放和平移页面。
设置可视视口
1. 编辑头部元素：
2- 添加视口：
然后添加视口元标签，并在设备模式下检查页面。注意页面不再缩小，内容缩放比例与桌面设备上的比例一致。如果内容在设备模拟器中表现异常，请切换设备模式以重置页面。
<meta name="viewport" content="width=device-width, initial-scale=1">
解释
meta viewport 标签向浏览器提供控制页面尺寸和缩放的指令。`width`width属性控制视口的大小。它可以设置为特定的像素值（例如，`width=500`），也可以设置为特殊值 `width` device-width，该值表示在 100% 缩放比例下屏幕的 CSS 像素宽度。（还有对应的 `width`height和device-height`height` 值，它们对于页面中元素的大小或位置会根据视口高度而变化的情况非常有用。）
该initial-scale属性控制页面首次加载时的缩放级别。设置初始缩放比例可以改善用户体验，但内容仍然会超出屏幕边缘。
所以你需要使用 CSSflex或grid其他属性来实现响应式设计。但这又是另一个话题了😜
感谢各位优秀的开发者！
文章来源：https://dev.to/nomangul/why-do-you-need-to-add-this-tag-inside-head-with-example-49do