html meta标签
前几天在写官网。这边记录下我有遇到的问题，下面开始了。
问题：在写响应式网站时，写完pc端页面，切换手机模式后，页面同比例缩放到手机上了。
同样之前也遇见过，pc端的页面在手机上乱了，不是同比例显示...
之前只是随便在网上找到解决办法，没有整体的去看一下这部分知识，今天特来记录总结下关于这方面的知识。
- 浏览器支持
所有浏览器都支持 <meta> 标签。
- 定义和用法
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
<meta> 标签位于文档的头部，不包含任何内容。<meta> 标签的属性定义了与文档相关联的名称/值对。
- 提示和备注
注释：<meta> 标签永远位于 head 元素内部。
注释：元数据总是以名称/值的形式被成对传递的。
- 必选属性
content: 定义与http-equiv或name属性相关的元信息
- 可选属性
-
- name属性
keywords: 关键词，告诉浏览器网页的关键词
description：描述，告诉浏览器网页的内容
<meta name="keywords" content="关于meta标签,网页,918之初"> <meta name="description" content="HTML中<meta>标签如何正确使用">
viewport：可视区域
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> //强制文档与设备宽度保持1:1，文档的比例和最大比例1.0，不可手动缩放
-
- http-equiv属性
content-type:文档内容类型，用于设定文档类型和字符集
expires：设定网页到期期限，一旦网页到期，那么必须在服务器上重新刷新而不能通过缓存获取网页，其中设置的时间格式为GMT格式
<meta http-equiv="expires" content="Fri,12 Jan 2001 15:15:15 GMT">
pragma：是否从缓存中访问网页内容
refresh:刷新，等待一定时间自动刷新或者跳转到其他url
<meta http-equiv="pragma" content="no-cache"> <meta http-equiv="refresh" content="1; url=https://www.baidu.com"/>
- 使用总结
<!DOCTYPE html> <html lang="en"> <head> <!-- 声明文档使用的字符编码 --> <meta charset='utf-8'> <!-- 优先使用 IE 最新版本和 Chrome --> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 页面描述 --> <meta name="description" content="不超过150个字符"/> <!-- 页面关键词 --> <meta name="keywords" content=""/> <!-- 网页作者 --> <meta name="author" content="name, email@gmail.com"/> <!-- 搜索引擎抓取 --> <meta name="robots" content="index,follow"/> <!-- 忽略页面中的数字识别为电话，忽略email识别 --> <meta name="format-detection" content="telphone=no, email=no"/> <!-- 强制文档与设备宽度保持1:1，文档的比例和最大比例1.0，不可手动缩放 --> <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/> <!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 微软的老式浏览器 --> <meta name="MobileOptimized" content="320"> <!-- uc强制竖屏 --> <meta name="screen-orientation" content="portrait"> <!-- QQ强制竖屏 --> <meta name="x5-orientation" content="portrait"> <!-- UC强制全屏 --> <meta name="full-screen" content="yes"> <!-- QQ强制全屏 --> <meta name="x5-fullscreen" content="true"> <!-- UC应用模式 --> <meta name="browsermode" content="application"> <!-- QQ应用模式 --> <meta name="x5-page-mode" content="app"> <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/> <!-- 添加 RSS 订阅 --> <link rel="shortcut icon" type="image/ico" href="/favicon.ico"/> <!-- 添加 favicon icon --> <title>标题</title> </head>
其中：
width=device-width ：表示宽度是设备屏幕的宽度
initial-scale=1.0：表示初始的缩放比例
minimum-scale=1.0：表示最小的缩放比例
maximum-scale=1.0：表示最大的缩放比例
user-scalable=yes：表示用户是否可以调整缩放比例（yes,no,1,0）
X-UA-Compatible 是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式。由于当下 IE6 和 IE7 使用率依然较高，综合考虑，启用 IE8 版本的 X-UA-Compatible 兼容模式显得相当重要。更多兼容ie版本代码，请看尾部链接。
本文参考：菜鸟教程：https://www.w3school.com.cn/tags/tag_meta.asp#meta_prop_name
meta标签：http://ife.baidu.com/note/detail/id/1525
ie更多兼容：https://blog.csdn.net/weixin_30589127/article/details/84444776
