移动端meta标签
1、设置当前html页面字符编码
<meta charset="UTF-8">
2、设置视口
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0,minimum=1.0,user-scalable=no">
/*
属性说明：
设置显示方式，一般适配移动设备用来避免缩放和影响体验的滚动条
width=device-width：宽度为设备宽度
initial-scale: 初始的缩放比例 （范围从>0到 10 ）
minimum-scale: 允许用户缩放到的最小比例
maximum-scale: 允许用户缩放到的最大比例
user-scalable: 用户是否可以手动缩放
*/
3、http-equiv
<meta http-equiv="content-type|default-style|refresh"> /* content-type:规定字符编码。：<meta http-equiv="content-type" content="text/html; charset=UTF-8">：其实可以直接写第一个<meta charset="UTF-8"> default-style：规定要使用的预定义的样式表。：<meta http-equiv="default-style" content="link 元素上的 title 属性的值"> refresh：定义文档自动刷新的时间间隔。：<meta http-equiv="refresh" content="300"> */ <meta http-equiv="X-UA-Compatible" content="IE=edge"/> /*设置浏览器兼容模式*/ <meta http-equiv="X-UA-Compatible" content="chrome=1">/*提示 IE 用户安装 Google Frame*/ <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">/* 最佳的兼容模式方案，结合考虑以上两种*/ <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/> /* Cache-Control指定请求和响应遵循的缓存机制。在请求消息或响应消息中设置Cache-Control并不会修改另一个消息处理过程中的缓存处理过程。请求时的缓存指令包括no-cache、no-store、max-age、max-stale、min-fresh、only-if-cached，响应消息中的指令包括public、private、no-cache、no-store、no-transform、must-revalidate、proxy-revalidate、max-age。各个消息中的指令含义如下, no-cache指示请求或响应消息不能缓存 no-store用于防止重要的信息被无意的发布。在请求消息中发送将使得请求和响应消息都不使用缓存 must-revalidate：告诉浏览器、缓存服务器，本地副本过期前，可以使用本地副本；本地副本一旦过期，必须去源服务器进行有效性校验。 */ <meta http-equiv="Pragma" content="no-cache"/> /*用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出*/
4、format-detection
<meta name="format-detection" content="telephone=no, email=no">
/*
- 一般情况下，IOS和Android系统都会默认某长度内的数字为电话号码，这个取消蛮有用的
- 忽略页面对手机号、email的识别
- telephone：yes|no
- email：yes|no
*/
5、apple-mobile-web-app-
<meta name="apple-mobile-web-app-capable" content="yes" />/* 删除默认的苹果工具栏和菜单栏,允许全屏浏览，webapp 全屏模式：伪装app,离线应用*/ <meta name="apple-mobile-web-app-status-bar-style" content="black" /> /*控制顶端状态栏的显示样式，隐藏状态栏/设置状态栏颜色：只有在开启webapp全屏模式时才生效,content的值为default\black\black-translucent.*/ <meta name="apple-mobile-web-app-title" content="标题"> /*添加到主屏后的标题*/
6、强制竖屏（只有UC和X5内核的浏览器支持，其他浏览器不支持。）
<meta name="x5-orientation" content="portrait">/*x5写法*/ <meta name="screen-orientation" content="portrait"> /*uc写法*/
7、浏览器全屏显示（只有UC和X5内核的浏览器支持，其他浏览器不支持。）
<meta name="x5-fullscreen" content="true"> /*x5写法*/ <meta name="full-screen" content="yes"> /*uc写法*/
8、浏览器内核控制 renderer
<meta name="renderer" content="webkit|ie-comp|ie-stand">
/*
- content的取值为webkit,ie-comp,ie-stand之一，区分大小写，分别代表用webkit内核，IE兼容内核，IE标准内核。
- 若页面需默认用极速核，增加标签：<meta name="renderer" content="webkit">
- 若页面需默认用ie标准内核，增加标签：<meta name="renderer" content="ie-stand">
- 若页面需默认用ie兼容内核，增加标签：<meta name="renderer" content="ie-comp">
*/
9、Safari浏览器私有的meta
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="apple-mobile-web-app-title" content="APP name">
/*
--------‘apple-mobile-web-app-capable’---------
隐藏浏览器的地址栏和toolbar，页面显示为全屏，不加此meta则默认显示地址栏和toolbar
content：yes|no
--------‘apple-mobile-web-app-status-bar-style’-----------
content：default|black| black-translucent，即白色、黑色、灰色半透明
--------‘apple-mobile-web-app-title’--------------
添加到主屏后的标题
*/10、UCi浏览器私有的meta
<meta name="screen-orientation" content="landscape"> <meta name="full-screen" content="yes"> <meta name="browsermode" content="application"> <meta name="layoutmode" content="fitscreen"> <meta name="nightmode" content="disable"> <meta name="imagemode" content="force"> /* -------------‘screen-orientation’屏幕方向-------------- 强制页面横屏或竖屏显示 content：landscape|portrait---------- -------------‘full-screen’全屏 进入全屏后，页面隐藏菜单栏, 生成一个悬浮标, 点击悬浮标可显示菜单栏 -------------‘browsermode’应用模式----------- 应用模式是为方便 web 应用及游戏开发者设置的综合开关，通过 meta 标签进行指示打开，当进入应用模式时，长按菜单、默认手势、夜间模式失效 -------------‘layoutmode’排版模式----------- UC 浏览器供适屏模式及标准模式，其中适屏模式简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快。而标准模式则能按照标准规范对页面进行排版及渲染。 content：fitscreen|standard -------------‘nightmode’禁用夜间模式 ------------- 禁止页面使用 UC 浏览器自定义的夜间模式 -------------‘imagemode’强制图片显示 ------------ 为了节省流量及加快速度，通过强制图片显示的功能可以保证图片显示不受用户的设置影响。 */
11、QQi浏览器私有的meta
<meta name="x5-orientation" content="landscape"> <meta name="x5-fullscreen" content="true"> <meta name="x5-page-mode" content="default"> /* -----------‘x5-orientation’横竖屏控制 -------------- 强制横/竖屏以及跟随浏览器设置【默认】 content：landscape|portrait|auto ------------‘x5-fullscreen’全屏控制 ---------------- 强制全屏以及跟随浏览器设置【默认】 content：true|auto ------------‘x5-page-mode’ 页面模式 ---------------- 普通浏览模式【默认】以及网页应用模式（定制工具栏，全屏显示） content：default|app */
参考文献：
https://blog.csdn.net/Small_Dark/article/details/72420948#1%E5%B8%B8%E7%94%A8%E5%B1%9E%E6%80%A7
https://blog.csdn.net/qq_30960791/article/details/76690004
本文为自己知识点搜索整理，若有侵权麻烦联系我删除本文章。谢谢(*￣︶￣)
