meta标签复习总结

<meta http-equiv="X-UA-Compatible" content="IE=edge">

当我们在网页头部添加这个标签及属性时它会告诉浏览器使用最新的文档模式，无论用户使用的是哪种版本的 Internet Explorer 浏览器（包括 Edge 浏览器），都会以标准的方式来渲染网页，提高兼容性

3.name

<meta name="viewport" content="width=600, initial-scale=1">

当name设置了，viewport代表视口大小和形状

可以设置width、height、initial-scale、minimum-scale、maximum-scale等值

width

控制视口的大小。这可以设置为特定像素数（如’width=600’），也可以设置为特殊值device-width，即100vw，100% 的视口宽度。最小值为 1。最大值为 10000。负值会被忽略。

height

控制视口的大小。 这可以设置为特定像素数（如 width=600），也可以设置为特殊值 device-height，即100vh，100% 的视口高度。最小值为 1。最大值为 10000。负值会被忽略。

initial-scale

控制页面首次加载时显示的缩放倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。

minimum-scale

控制页面允许缩小的倍数。最小值是 0.1。最大值是 10。默认值为 1。负值会被忽略。

maximum-scale

控制页面允许放大的倍数。设置一个低于 3 的值将不具备无障碍访问性。最小值是 0.1。最大值是 10。默认值为1。负值会被忽略。

看下最常用的设置就是content="width=device-width, initial-scale=1.0"代表窗口宽度，如果设置具体数值，例如600那么效果就会在小于600时缩放页面

4.content

在viewport示例可以看到已经使用了，content属性。他的意思就好比是name所规定的key所对应的value。具体的取值。

例如：

<meta name="description" content="This is a description." />

它的意思就是，一段描述可以修改网页文字的神奇代码，content里面是具体的内容，这个有什么作用呢可以修改网页文字的神奇代码， 相信你一定用过百度，百度搜索关键字之后，会出现你想要的结果列表，它总是会有一段描述。例如这样。

打开F12可以看到百度百科的描述是这个

所以description的作用就是搜索引擎之后展示在结果列表的表述。

注：当然有时候你可能发现并不是你只要写了描述，搜索引擎就一定会用你的content，它会根据自己的算法，提供给用户其他的描述。

5.keywords

下面是掘金官方首页的meta，它的作用就是告诉搜索引擎，搜索哪些关键字可以搜索到我，说白了，就是利于SEO。

<meta name="keywords" content="掘金,稀土,Vue.js,前端面试题,Kotlin,ReactNative,Python">

这么多好用的小功能，赶快用起来吧。