H5项目常见问题及注意事项，视频全屏，定位，屏幕旋转和触摸，偏页面重构向 来源joacycode的github (6)

微信浏览器用户调整字体大小后页面矬了，怎么阻止用户调整

//以下代码可使Android机页面不再受用户字体缩放强制改变大小，但是会有1S左右延时，期间可以考虑loading来处理 if (typeof(WeixinJSBridge) == "undefined") { document.addEventListener("WeixinJSBridgeReady", function (e) { setTimeout(function(){ WeixinJSBridge.invoke(\'setFontSizeCallback\', { \'fontSize\':0}, function(res){ alert(JSON.stringify(res)); }) }, 0) }); }else{ setTimeout(function(){ WeixinJSBridge.invoke(\'setFontSizeCallback\', { \'fontSize\':0}, function(res){ alert(JSON.stringify(res)); }) }, 0) } //IOS下可使用 -webkit-text-size-adjust禁止用户调整字体大小 body { -webkit-text-size-adjust:100%!important; } //最好的解决方案：最好使用rem或百分比布局

定位的坑

//fixed定位 //1.ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位 //2.android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位 //3.ios4下不支持position:fixed //解决方案：使用[Iscroll]()，如： <div id=http://www.likecs.com/"wrapper"> <ul> <li></li> ..... </ul> </div> <script src=http://www.likecs.com/"iscroll.js"></script> <script> var myscroll; function loaded(){ myscroll=http://www.likecs.com/new iScroll("wrapper"); } window.addEventListener("DOMContentLoaded",loaded,false); </script> //position定位 //Android下弹出软键盘弹出时，影响absolute元素定位 //解决方案: var ua = navigator.userAgent.indexOf(\'Android\'); if(ua>-1){ $(\'.ipt\').on(\'focus\', function(){ $(\'.css\').css({\'visibility\':\'hidden\'}) }).on(\'blur\', function(){ $(\'.css\').css({\'visibility\':\'visible\'}) }) } 播放视频不全屏 <!-- 1.ios7+支持自动播放 2.支持Airplay的设备（如：音箱、Apple TV)播放 x-webkit-airplay=http://www.likecs.com/"true" 3.播放视频不全屏 webkit-playsinline=http://www.likecs.com/"true" --> <video x-webkit-airplay=http://www.likecs.com/"true" webkit-playsinline=http://www.likecs.com/"true" preload=http://www.likecs.com/"auto" autoplay src=http://www.likecs.com/"http://"></video>

JS判断移动端设备// 我记得《高级javascript程序设计》上有个更全面的，可以兼判断pc端的浏览器，以及这个仍然属于没办法的办法。

function deviceType(){ var ua = navigator.userAgent; var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; for(var i=http://www.likecs.com/0; i<len,len = agent.length; i++){ if(ua.indexOf(agent[i])>0){ break; } } } deviceType(); window.addEventListener(\'resize\', function(){ deviceType(); })

JS判断微信浏览器

function isWeixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)==http://www.likecs.com/\'micromessenger\'){ return true; }else{ return false; } }

android 2.3 bug 
//1.@-webkit-keyframes 需要以0%开始100%结束，0%的百分号不能去掉 
//2.after和before伪类无法使用动画animation 
//3.border-radius不支持%单位，如要兼容，可以给radius设置一下较大的值 
//4.translate百分比的写法和scale在一起会导致失效，例如： 
-webkit-transform: translate(-50%,-50%) scale(-0.5, 1)