@Mercedes-Benz
2016-09-12T02:02:20.000000Z
字数 3588
阅读 998
文章·移动
Windows Phone这些，还有超级老的浏览器特有的meta不考虑在内参考文档：
Segmentfault - 常用meta整理
HTML meta 标签
H5项目常见问题汇总及解决方案
<!-- 启用360浏览器的极速模式(webkit) --><meta name="renderer" content="webkit"><!-- 避免IE使用兼容模式 --><meta http-equiv="X-UA-Compatible" content="IE=edge"><!--调试的时候用的标签，不缓存，每次都重新拉取，微信测试有效http://www.codeceo.com/article/broswer-http-cache.html以上链接对缓存做进一步说明--><meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"><meta http-equiv="Pragma" content="no-cache"><meta http-equiv="Expires" content="0">
<meta name ="viewport" content="width=device-width, initial-scale=2.3, user-scalable=no"><meta name="format-detection" content="telephone=no, email=no, address=no">
官方文档：Safari HTML Reference
更新文档：What's New in Safari
<meta name="viewport" content="minimal-ui"><meta name="apple-mobile-web-app-capable" content="yes"><!-- default(白色，默认) | black(黑色) | black-translucent(半透明) --><meta name="apple-mobile-web-app-status-bar-style" content="black">
meta能在旧版本的系统有效下，而在新版本的系统上则取消了我们在用手机通过百度搜索出来的页面，如果没有在做好适配或者没有声明百度自家的meta时候，百度会自行将你的网站自动转码为适合手机浏览的页面，这时候就要用到百度的meta(想了解为何要这样的请戳这里还有这里)：
<meta http-equiv="Cache-Control" content="no-transform"><meta http-equiv="Cache-Control" content="no-siteapp">
就是不知道这俩可不可以直接写成一行?
Android U3 内核版
版本号： 10.5.2.598
更新时间：2015-07-02
官方文档：请戳这里下载DOC文档
话说，UC有个奇怪的自动优化策略，页面文字多的时候会自动帮你放大字号（我摔~难怪字号老是大那么一截）答案在这~
<meta name="wap-font-scale" content="no">
<!-- 横屏 --><meta name="screen-orientation" content="landscape"><!-- 竖屏 --><meta name="screen-orientation" content="portrait">
<meta name="full-screen" content="yes">
<meta name="viewport" content="uc-fitscreen=yes">
user-scable设置为no，UC还是可以强制缩放的
<!-- 适屏模式：简化了一些页面的处理，使得页面内容更适合进行页面阅读、节省流量及响应更快 --><meta name="layoutmode" content="fitscreen"><!-- 标准模式：按照标准规范对页面进行排版及渲染 --><meta name="layoutmode" content="standard">
<meta name="nightmode" content="enable/disable">
<meta name="imagemode" content="force">
meta是强制整页图片显示，单个可以为图片标签增加一个属性
<meta name="browsermode" content="application">
方法一：
<meta name="wap-font-scale" content="no">
方法二：
目前uc浏览器会对wap页面字体按规则放大，查看此页面命中了目前定义的规则。
若不想页面字体被放大，可以通过增加html5标签 header、nav、section中的任一个来避免。
<body><header></header></body>
X5内核
版本号：6.0
更新时间：2015-07-03
官方文档：请戳这里查看在线文档
<!-- landscape: 强制横屏 --><meta name="x5-orientation" content="landscape"><!-- portrait: 强制竖屏 --><meta name="x5-orientation" content="portrait"><!-- auto: 跟随浏览器(默认) --><meta name="x5-orientation" content="auto">
<!-- true: 强制全屏 --><meta name="x5-fullscreen" content="true"><!-- auto: 跟随浏览器(默认) --><meta name="x5-fullscreen" content="auto">
<!-- default: 跟随浏览器(默认) --><meta name="x5-page-mode" content="default"><!-- app: 网页应用模式（定制工具栏，全屏显示） --><meta name="x5-page-mode" content="app">
:after等伪类动画viewport的width设置为固定值时，QQ浏览器不会进行相应的缩放，而Android的内置浏览器和Chrome则可以正常缩放。
这里有个问题，IOS是不能自动播放音乐的，一定要触发一个用户交互事件，例如点击。但是有一种hack的方法可以让IOS微信侧页面自动播放（SAFARI依旧无效）：通过new一张图片，监听一张图片的onload事件，结束后回调执行音频播放audio.play()即可，原理估计是动了dom结构，相当于执行了一次交互。（有人也用过createEvent模拟，原理也是动了dom。）