Meta 标签适配

在移动端浏览器中，确保页面正确缩放需要正确设置 <meta> 标签。以下是推荐使用的配置：

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

Viewport 设置

viewport 设置中：

• width=device-width：使用设备宽度作为布局宽度
• initial-scale=1.0：初始缩放比例为1
• maximum-scale=1.0：禁止用户放大页面

媒体查询应用

使用 CSS 媒体查询针对不同屏幕尺寸提供样式：

@media screen and (max-width: 768px) {
    /* 在 768px 以下屏幕上的样式 */
    body {
        font-size: 14px;
    }
}