参考资料

  1. Meta Twitter 卡片
  2. Meta 暗色模式适配
  3. Meta视口（Viewport）是HTML中用于控制网页在移动设备上显示方式的标签
  4. meta‌搜索引擎索引规则
  5. Meta字符编码声明
  6. Open Graph协议是由Facebook推出的元数据协议
  7. Meta 内容语言声明
  8. meta‌‌‌ iOS设备优化是一个用于提升iOS设备性能的库

简介

Meta视口（Viewport）是HTML中用于控制网页在移动设备上显示方式的标签，确保网页在不同设备上正确缩放和布局。

功能

  1. 控制网页宽度与设备宽度一致

  2. 设置初始缩放比例

  3. 禁止用户缩放

  4. 适配不同屏幕密度

语法

<meta name="viewport" content="width=device-width, initial-scale=1.0">

常用属性

  • width：视口宽度（通常设为device-width）

  • initial-scale：初始缩放比例（1.0表示不缩放）

  • minimum-scale：最小缩放比例

  • maximum-scale：最大缩放比例

  • user-scalable：是否允许用户缩放（yes/no）

示例

  1. 基本响应式设置：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

  1. 禁止缩放：

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

  1. 适应高DPI屏幕：

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

注意事项

  1. 必须放在<head>标签内

  2. 没有关闭标签（自闭合标签）

  3. 不设置可能导致移动端显示问题

  4. 过度限制缩放可能影响可访问性

  5. 不同浏览器可能对某些属性支持不同

TAG：标签不同比例网页宽度用户屏幕属性