写了一个有音频的页面 发现了几个问题：
音频在各个浏览器里获取 duration 总时间和 currentTime 时长 uc浏览器里获取不到 而手机自带的浏览器可以获取到。
1:自动播放音乐在手机浏览器里不能自动播放，原因是 浏览器禁止了音乐在刚进页面中自动播放来浪费用户的流量，自动播放还和浏览器的版本有关系 qq浏览器是可以自动播放的，
Window.onload = function(){
audio.play();//音乐播放也不行
}；
用canplay事件也不行，代码模拟点击事件也不行
有一种办法能自动播放用ajax请求 拿到音频 存到缓存中 可以解决浏览器自动播放，但是缓存播放 和 点击播放不冲突，缓存在播放 点击播放也在播放，还有播放音乐时间在走也是问题，
放到缓存里代码如下：
window.addEventListener('load', function () {
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source = audioCtx.createBufferSource();
var xhr = new XMLHttpRequest();
xhr.open('GET', 'audio-autoplay.wav');
xhr.responseType = 'arraybuffer';
xhr.addEventListener('load', function (r) {
console.log(xhr.response);
audioCtx.decodeAudioData(
xhr.response,
function (buffer) {
source.buffer = buffer;
source.connect(audioCtx.destination);
source.loop = false;
});
playsound();
});
xhr.send();
var playsound = function () {
source.start(0);
};
});
参考地址如下：https://xenos.reinom.com/audio-autoplay.html
2: 音频在页面中获取时长 和总长时 uc浏览器获取不到总时间为0，手机自带浏览器获取总时间会很慢 不管用setInterval 还是定时器 setTImeout 都一样，除非用事件点击事件后获取是可以的，
3: uc mini浏览器不能全屏 原因在：浏览器头部的导航条占据了页面一部分，所以真正页面会少一部分所以页面会撑长 不会全屏，自己试过一个div在页面顶部 一个div在页面底部 。庆幸的是国内 uc mini浏览器不开发 。
4:facebook分享如果用网页分享meta标签开发图谱写分享 不能自定义用js设置url images title descripti 因为facebook的网络爬虫是在服务端返回浏览器最初的html里爬虫
页面访问流程：
浏览器出入网址 —>三次握手与服务端通信 (查询ip解析主机站点资源封装成http返回给浏览器) 四个握手 浏览器分析responese的html(这个html是最初的没有css js 修饰)(网络爬虫也是在这个阶段读取页面元素)—>浏览器接受到responese拿到html 接下来会解析css js 最终渲染页面 展示出来
一个图片解释了页面访问流程链接如下：
file:///Users/demo/Desktop/Jon%20Han/网页请求流程图片/20151010124247204
做元旦活动页面遇到的坑：
1:音频不能在浏览器里自动播放
2:uc mini浏览器不能全屏
3:facebook用网页分享meta标签开发图谱 网络爬虫不能用js设置url images
Trident 是 ie
Gecko 是 firefox netscape6-9
Webkit 是 safai chrome
Presto 是 opera
手机自带浏览器内核 webkit (chrome)
Qq9.0浏览器用的是IE Webkit chrome 兼容性好
uc浏览器内核是：webkit（chrome）
浏览器内核检测链接：https://ie.icoa.cn
1: 引入字体：如果设计师给的字体没有再如果字体在手机上不是通用，在手机有这个字体包样式就是好的，但如果没有那就是不好，引入字体包是解决办法：
iconfont里有字体包，链接如下：
http://iconfont.cn/webfont/?spm=a313x.7781069.1998910419.d81ec59f2#!/webfont/index
有字库里有字体包，链接如下：
https://www.youziku.com
2: 判读各个国家的语言，在各个国家展示不一样的样式：解决办法是：
用系统语言判断：navigator.language；
代码如下：
function getLanguage(){
let language = navigator.language;
if( language.indexOf(‘en’) > -1){
}
}
各国系统语言可以在i80N查
链接如下：http://domokun.cc/article/2017-03/9.html
如果国家有特殊化也可以用时区去判断但没有系统语言判断好
css写js，js变量css可以获取
以前的 expression但是现在已经废弃
2017年的css也可以定义变量和sass less的语法也快相近了
4: javascript于css通信
设置变量
Document.body.style.setProperty(‘—primary’,’—#f00’);
读取变量
document.body.style.getPropertyValue(‘—primary’).trim();
删除变量
Document.body.style.removeProperty(‘—primary’)
用 var() 函数读取变量；
参考地址：http://www.ruanyifeng.com/blog/2017/05/css-variables.html
5: 反省，以后做项目我会主要问几个问题：
（1）：项目在那个app里展示兼容app是否还有浏览器？
（2）：用运营页面还是backbone页面？
（3）：页面逻辑 调用接口 和 谁连调 接口调用
（4）：页面埋点