常用meta适配标签
<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" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<meta name="apple-touch-fullscreen" content="yes"/>
<meta name="format-detection" content="email=no" />
<meta name="wap-font-scale" content="no" />
<meta name="viewport" content="user-scalable=no, width=device-width" />
<meta content="telephone=no" name="format-detection" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />这些 HTML 中的 meta 标签都是针对移动端页面优化的,下面分别介绍它们的作用:
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no" />
- 设置视口宽度为设备宽度
- 初始缩放比例为 1.0
- 最大缩放比例为 1.0
- 禁止用户缩放页面
<meta name="apple-mobile-web-app-capable" content="yes" />当网页被添加到 iOS 设备的主屏幕时,页面会以全屏模式打开
<meta name="apple-mobile-web-app-status-bar-style" content="black" />设置 iOS 设备的状态栏样式为黑色
<meta name="apple-touch-fullscreen" content="yes"/>当网页被添加到 iOS 设备的主屏幕时,页面会以全屏模式打开
<meta name="format-detection" content="email=no" />禁止 iOS 设备识别页面上的邮箱地址为可点击链接
<meta name="wap-font-scale" content="no" />禁止 iOS 设备对页面上的字体进行自动缩放
<meta name="viewport" content="user-scalable=no, width=device-width" />设置视口宽度为设备宽度 禁止用户缩放页面
<meta content="telephone=no" name="format-detection" />禁止 iOS 设备识别页面上的电话号码为可点击链接
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />设置页面的字符编码为 UTF-8