案例
一、天猫
<meta charset="utf-8"> <title>天猫TMALL</title> <meta name="data-spm" content="a211ue"> <meta name="description" content=""> <meta name="keyword" content=""> <meta name="aplus-xplug" content="NONE"> <meta name="aplus-terminal" content="1"> <meta name="aplus-touch" content="1"> <meta name="aplus-waiting" content="1"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, 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="format-detection" content="telephone=no"/>
二、淘宝
<meta name=App-Config content="fullscreen=yes,useHistoryState=yes,transition=yes"> <meta content=yes name=apple-mobile-web-app-capable> <meta content=yes name=apple-touch-fullscreen> <meta content="telephone=no,email=no" name=format-detection> <meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> <link href=//gw.alicdn.com/tps/i2/TB1nmqyFFXXXXcQbFXXE5jB3XXX-114-114.png rel=apple-touch-icon-precomposed> <link href=//gw.alicdn.com/tps/i2/TB1nmqyFFXXXXcQbFXXE5jB3XXX-114-114.png rel="Shortcut Icon" type=image/x-icon>
三、京东
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>多快好省，购物上京东！</title> <meta http-equiv="Cache-Control" content="max-age=180"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta name="format-detection" content="telephone=no"> <link rel="dns-prefetch" href="//m.360buyimg.com"> <meta name="format-detection" content="telephone=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, shrink-to-fit=no, viewport-fit=cover"> <meta http-equiv="x-dns-prefetch-control" content="on" />
四、百度
<meta name="referrer" content="always"> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"> <meta http-equiv="x-dns-prefetch-control" content="on"> <link rel="dns-prefetch" href="//m.baidu.com"> <link rel="shortcut icon" href="https://gss0.bdstatic.com/5bd1bjqh_Q23odCf/static/wiseindex/img/favicon64.ico" type="image/x-icon"> <link rel="apple-touch-icon-precomposed" href="https://gss0.bdstatic.com/5bd1bjqh_Q23odCf/static/wiseindex/img/screen_icon_new.png"> <meta name="format-detection" content="telephone=no">
五、移动端H5页面常用的meta属性
<!-- 适应移动端start --> <!-- width viewport 宽度(数值/device-width) height viewport 高度(数值/device-height) initial-scale 初始缩放比例 maximum-scale 最大缩放比例 minimum-scale 最小缩放比例 user-scalable 是否允许用户缩放(yes/no) minimal-ui iOS 7.1 beta 2 中新增属性，在页面加载时最小化上下状态栏 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, minimal-ui"> <!-- 删除苹果默认的工具栏和菜单栏 --> <meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 设置苹果工具栏颜色 --> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <!-- 忽略页面中的数字识别为电话，忽略email识别 --> <meta name="format-detection" content="telphone=no, email=no" /> <!-- 启用360浏览器的极速模式(webkit) --> <meta name="renderer" content="webkit"> <!-- 避免IE使用兼容模式 --> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- 针对手持设备优化，主要是针对一些老的不识别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"> <!-- 设置在apple上以应用模式启动时，是否全屏 --> <meta name="apple-touch-fullscreen" content="yes"> <!-- windows phone 点击无高光 --> <meta name="msapplication-tap-highlight" content="no"> <!-- 适应移动端end -->
相关连接：html5手机网站需要加的那些meta标签，手机网站自适应
移动端—HTML5手机网页需要加的那些meta/link标签，H5 meta全解