前言：开发H5的时候，有时候需要嵌入到IOS、安卓或者PC等其他端处，或者单纯是一个H5，可能有时候需要禁止用户对页面进行缩放和放大的操作。

meta是什么

  • HTML中的meta标签用于提供关于网页的元数据信息，这些信息可以帮助浏览器正确地展示网页内容，同时也对**搜索引擎优化(SEO)**和社交媒体分享有一定作用。
  • meta标签主要包含name属性、http-equiv属性和content属性。这三个属性都是meta标签必须的属性。

meta标签可以包含以下信息

  • 网页关键词（keywords）：指定与页面相关的关键词，以便搜索引擎更好地理解并索引该页面。
  • 网页描述（description）：提供一个简短的描述，告诉搜索引擎和用户这个页面是关于什么的。
  • 编码方式（charset）：指定网页使用的字符编码方式，避免出现乱码问题。
  • 视口（viewport）：指定如何在移动设备上显示网页，使得用户可以更好地浏览。
  • 其他信息：还可以包含其他自定义的元数据信息，比如作者、生成日期等。

案例

  • name属性用来指定元数据的名称，如“keywords”、“description”等；content属性则用来设置元数据的具体内容；而http-equiv属性则可以用来模拟HTTP头部的作用，常见的值有“refresh”、“content-type”等。
1
2
3
<meta name="keywords" content="HTML, CSS, JavaScript">
<meta name="description" content="Learn HTML, CSS, and JavaScript online for free.">
<meta http-equiv="refresh" content="5;url=https://www.example.com/">
  • 以上代码中第一个meta标签定义了页面的关键词，在搜索引擎优化时有着很大的作用；第二个meta标签则用来描述页面，帮助用户更好地了解该网页的内容；第三个meta标签则指定在5秒后自动跳转到另一个网页。

需要注意的是，虽然不是所有的meta标签都需要这三个属性，但至少需要一个name或http-equiv属性和一个content属性才能正确地定义元数据信息。

禁止HTML页面进行缩放操作

其实很简单，在index.html里面加入下面这行代码即可

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;"/>

设置防止手机百度转码

1
<meta http-equiv="Cache-Control" content="no-siteapp"/>