H5项目常见问题及注意事项

2016-07-06 00:38:00

Meta基础知识：

H5页面窗口自动调整到设备宽度，并禁止用户缩放页面

//一、HTML页面结构// width    设置viewport宽度，为一个正整数，或字符串‘device-width’// height   设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置// initial-scale    默认缩放比例，为一个数字，可以带小数// minimum-scale    允许用户最小缩放比例，为一个数字，可以带小数// maximum-scale    允许用户最大缩放比例，为一个数字，可以带小数// user-scalable    是否允许手动缩放//二、JS动态判断var phoneWidth =  parseInt(window.screen.width);var phoneScale = phoneWidth/640;var ua = navigator.userAgent;if (/Android (\d+\.\d+)/.test(ua)){    var version = parseFloat(RegExp.$1);    if(version>2.3){        document.write('');    }else{        document.write('');    }} else {    document.write('');}

空白页基本meta标签

其他meta标签

常见问题：

移动端如何定义字体font-family

@ --------------------------------------中文字体的英文名称@ 宋体      SimSun@ 黑体      SimHei@ 微信雅黑   Microsoft Yahei@ 微软正黑体 Microsoft JhengHei@ 新宋体    NSimSun@ 新细明体  MingLiU@ 细明体    MingLiU@ 标楷体    DFKai-SB@ 仿宋     FangSong@ 楷体     KaiTi@ 仿宋_GB2312  FangSong_GB2312@ 楷体_GB2312  KaiTi_GB2312  @@ 说明：中文字体多数使用宋体、雅黑，英文用Helveticabody { font-family: Microsoft Yahei,SimSun,Helvetica; }

打电话发短信写邮件怎么实现

// 一、打电话打电话给:0755-10086//  二、发短信，winphone系统无效发短信给: 10086// 三、写邮件//注：在添加这些功能时，第一个功能以"?"开头，后面的以"&"开头//1.普通邮件点击我发邮件//2.收件地址后添加?cc=开头，可添加抄送地址（Android存在兼容问题）点击我发邮件//3.跟着抄送地址后，写上&bcc=,可添加密件抄送地址（Android存在兼容问题）点击我发邮件//4.包含多个收件人、抄送、密件抄送人，用分号(;)隔开多个邮件人的地址点击我发邮件//5.包含主题，用?subject=点击我发邮件//6.包含内容，用?body=;如内容包含文本，使用%0A给文本换行 点击我发邮件//7.内容包含链接，含http(s)://等的文本自动转化为链接点击我发邮件//8.内容包含图片（PC不支持）你的浏览器还不支持哦//音频，写法二    优先播放音乐bg.ogg，不支持在播放bg.mp3//JS绑定自动播放（操作window时，播放音乐）$(window).one('touchstart', function(){    music.play();})//微信下兼容处理document.addEventListener("WeixinJSBridgeReady", function () {    music.play();}, false);//小结//1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常//2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间

重力感应事件

// 运用HTML5的deviceMotion，调用重力感应事件if(window.DeviceMotionEvent){    document.addEventListener('devicemotion', deviceMotionHandler, false)}   var speed = 30;var x = y = z = lastX = lastY = lastZ = 0;function deviceMotionHandler(eventData){    var acceleration = event.accelerationIncludingGravity;    x = acceleration.x;    y = acceleration.y;     z = acceleration.z;    if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){        //这里是摇动后要执行的方法         yaoAfter();    }    lastX = x;    lastY = y;    lastZ = z;}function yaoAfter(){    //do something}//说明：说见案例摇一摇效果中yao.js

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

//以下代码可使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](http://cubiq.org/iscroll-5)，如：               1.                .....    var myscroll;    function loaded(){        myscroll=new iScroll("wrapper");    }    window.addEventListener("DOMContentLoaded",loaded,false);//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'})    })}

播放视频不全屏

JS判断设备

function deviceType(){    var ua = navigator.userAgent;    var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"];        for(var i=0; i0){                     break;        }    }}deviceType();window.addEventListener('resize', function(){    deviceType();})

JS判断微信浏览器

function isWeixin(){    var ua = navigator.userAgent.toLowerCase();    if(ua.match(/MicroMessenger/i)=='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)

android 4.x bug

//1.三星 Galaxy S4中自带浏览器不支持border-radius缩写//2.同时设置border-radius和背景色的时候，背景色会溢出到圆角以外部分//3.部分手机(如三星)，a链接支持鼠标:visited事件，也就是说链接访问后文字变为紫色//4.android无法同时播放多音频audio

消除transition闪屏

.css {    -webkit-transform-style: preserve-3d;    -webkit-backface-visibility: hidden;    -webkit-perspective: 1000;}

开启硬件加速

//目前，像Chrome/Filefox/Safari/IE9+以及最新版本Opera都支持硬件加速，当检测到某个DOM元素应用了某些CSS规则时就会自动开启，从而解决页面闪白，保证动画流畅。.css {    -webkit-transform: translate3d(0,0,0);    -moz-transform: translate3d(0,0,0);    -ms-transform: translate3d(0,0,0);    transform: translate3d(0,0,0);}

渲染优化

//1.禁止使用iframe（阻塞父文档onload事件）//2.禁止使用gif图片实现loading效果（降低CPU消耗，提升渲染性能）//使用CSS3代码代替JS动画；//开启GPU加速；//使用base64位编码图片(不小图而言，大图不建议使用)    // 对于一些小图标，可以使用base64位编码，以减少网络请求。但不建议大图使用，比较耗费CPU。小图标优势在于：    //1.减少HTTP请求；    //2.避免文件跨域；    //3.修改及时生效；