meta viewport是什么？ 原理是什么？

width: 设置视口的宽度。width=device-width 表示视口的宽度等于设备的宽度。这确保了页面的宽度适应不同屏幕大小，避免了水平滚动条。

initial-scale: 设置页面加载时的初始缩放比例。initial-scale=1.0 表示页面以默认比例显示，没有缩放。

user-scalable: 控制用户是否可以缩放页面。user-scalable=no 禁止用户缩放，user-scalable=yes 允许缩放。

maximum-scale 和 minimum-scale: 控制页面的最大和最小缩放级别。比如 maximum-scale=2.0 允许用户最多放大到原始大小的两倍。

作用
响应式设计: 确保网页在不同设备上的显示效果良好，不论是手机、平板还是桌面电脑。
避免缩放问题: 通过设置合适的 initial-scale，避免默认缩放造成的排版问题。
提升用户体验: 通过合理的视口设置，提高在移动设备上的可读性和可操作性。
使用 meta viewport 可以帮助确保网页在各种设备上都能以最佳方式显示，提供更好的用户体验。