前几天在写官网。这边记录下我有遇到的问题，下面开始了。
问题：在写响应式网站时，写完pc端页面，切换手机模式后，页面同比例缩放到手机上了。
同样之前也遇见过，pc端的页面在手机上乱了，不是同比例显示...
之前只是随便在网上找到解决办法，没有整体的去看一下这部分知识，今天特来记录总结下关于这方面的知识。
- 浏览器支持
所有浏览器都支持 标签。
- 定义和用法
元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
标签位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。
- 提示和备注
注释： 标签永远位于 head 元素内部。
注释：元数据总是以名称/值的形式被成对传递的。
- 必选属性
content: 定义与http-equiv或name属性相关的元信息
- 可选属性
-
- name属性
keywords: 关键词，告诉浏览器网页的关键词
description：描述，告诉浏览器网页的内容
<meta name="keywords" content="关于meta标签,网页,918之初"> <meta name="description" content="HTML中标签如何正确使用">
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'>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="不超过150个字符"/>
<meta name="keywords" content=""/>
<meta name="author" content="name, [email protected]"/>
<meta name="robots" content="index,follow"/>
<meta name="format-detection" content="telphone=no, email=no"/>
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="HandheldFriendly" content="true">
<meta name="MobileOptimized" content="320">
<meta name="screen-orientation" content="portrait">
<meta name="x5-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="x5-fullscreen" content="true">
<meta name="browsermode" content="application">
<meta name="x5-page-mode" content="app">
<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<link rel="shortcut icon" type="image/ico" href="/favicon.ico"/>
<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