移动web前端之meta标签

Posted 2020-06-09

最近这段时间忙着做web移动端，东西跟pc端还是有区别的。这个月也学到了不少东西，太多了就从头开始，先总结meta标签吧。

主要标签内容和注释如下：

<meta charset="UTF-8"> <!--html5 已经简化 设置charset字符编码的格式-->
<meta http-equiv="X-UA-Compatible" content="IE=edge, chrome=1"/> <!--使用最新版本的IE 及使用谷歌内核渲染-->
<meta http-equiv="Cache-Control" content="no-siteapp" /> <!--禁止百度转码 往页面贴广告等-->
<!--当前视窗 宽度等于设备宽度 初始化缩放最小缩放最大缩放为1.0 范围(0-10) 且不允许用户缩放 ios-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes" /> <!--开启网站对web APP的支持 ios-->
<meta name="apple-touch-fullscreen" content="yes" /> <!--启用webapp全屏模式 ios-->
<!--控制状态栏显示样式 black为黑色 black-translucent为灰色半透明会覆盖20px高度 default为白色且会浮动在web顶端不会占用web页面资源 ios-->
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-mobile-web-app-title" content="apple主屏后的标题"> <!--添加到主屏后的标题 ios-->
<meta name="format-detection" content="telephone=no" /><!--禁止将数字处理为电话连接 ios-->
<meta name="format-detection" content="email=no" /> <!--关闭邮箱自动识别 android-->

<!--window phone 去掉a、input标签点击时产生的半透明灰色背景;ios则使用样式-webkit-tap-highlight-color:none;-->

<meta name="msapplication-tap-highlight" content="no" />