参考资料

  1. Meta作者与版权信息
  2. http-equiv="X-UA-Compatible" 是 HTML 的 标签属性，用于控制浏览器的文档渲染模式
  3. Meta自动刷新
  4. meta参数错误及解决方法
  5. Meta标签禁止电话号码自动识别
  6. meta参数设置的最佳实践
  7. Meta Twitter 卡片
  8. 如何优化meta参数提升排名

Meta视口（Viewport）是HTML中用于控制网页在移动设备上显示方式的标签

简介

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：标签不同比例网页宽度用户屏幕属性