移动web前端常见填坑（待完善）

填坑记之合成海报：

　　功能技术：http://html2canvas.hertzen.com

　　问题描述：合成模糊、合成区域内容错位，合成不完整，合成边缘白条等。

　　解决方案：如有页面布局正常合成错位的，可以检查元素是否使用了transform属性，尝试不用这个属性再去合成。

　　图片缺失和模糊参考如下代码，合成前递归加载图片，并在参数处设定倍数。

　　

//准备海报
function poster(){
	
	var posterImgList = [
		"h5/img/poster/1.jpg",
		"h5/img/poster/2.png",
		"h5/img/poster/3.png",
		"h5/img/poster/4.png",
		"h5/img/poster/5.png",
		"h5/img/poster/6.png",
		"h5/img/poster/7.png",
		"h5/img/poster/8.png",
		"h5/img/poster/9.png"

	];
	
	superLoadImg(posterImgList,0);
	
}


 //递归load图片
 function superLoadImg(imgList,imgIndex){
	 
	 if(imgIndex < imgList.length){
		 var imgObj = new Image();
		 imgObj.src = imgList[imgIndex];
		 imgObj.onload = function () {
			 console.log("加载图片"+imgIndex);
			 if(imgIndex == imgList.length- 1){
				 finalCompoundPoster();
			 }else{
				 imgIndex=imgIndex+1;
				 superLoadImg(imgList,imgIndex);
			 }
	     }
	 }
	 
 }

//合成海报最终
function finalCompoundPoster(){
    setTimeout(function(){
             var opt = {
                        scale:2,
                        width:$('#poster').width() - 1,//设置canvas尺寸与所截图尺寸相同，防止白边
                        height:$('#poster').height() - 1,//防止白边
                    }
                    html2canvas(document.querySelector("#poster"),opt).then(function(canvas) {
                        
                        try{
                            canvas.style.width="100%";
                            canvas.style.height="100%";
                            var saveImage = canvas.toDataURL('image/jpeg');
    
                            $('#posterImg').attr("src",saveImage);

                        
                        }catch(err){
                            alert(err);
                        }
                    })
    },200);
}

 2、填坑记之ios输入框弹起弹不下：

　　　　给每个input或输入框元素加上一个类名（比如inputEle）,在js中加上如下代码：

　　　　　　　　　　　　var msgbox = $('.inputEle');
                    msgbox.on('focusin', function() {
                        //软键盘弹出的事件处理
                        if (navigator.userAgent.indexOf('iPhone') != -1) {
                            tanchu();
                        }
                        
                    })
                    
                    msgbox.on('focusout', function() {
                        //软键盘收起的事件处理
                        if (navigator.userAgent.indexOf('iPhone') != -1) {
                            shouqi();
                        }
                    })
                    
                    var originalHeight=document.documentElement.clientHeight ||document.body.clientHeight;
                    $(window).resize(function(){
                        //键盘弹起与隐藏都会引起窗口的高度发生变化
                           var resizeHeight=document.documentElement.clientHeight || document.body.clientHeight;
                            if(resizeHeight-0<originalHeight-0){
                                
                             
                            }else{
                                 //苹果弹下去
                                 /* shouqi(); */
                            }
                    });
                    
                    
                    function tanchu() {
                       /* $("body,html").css("height", $('body').height() + $('body').height() / 4); */
                    }
            
                    function shouqi() {
                        /* $("body,html").css("height", "100%");  */
                        window.scroll(0, 0);
                    }

 3、填坑记之音乐自动播放：

	//音乐播放
	var audioTag=$("#musicEvent").get(0);
	var isPlay=false;
        audioTag.play();
	/*audioTag.addEventListener("canplay",function(){
			if(!isPlay){
				audioTag.play();
				isPlay=true;
			}
	},false);*/

	$(".musicImg").click(function(){
		
		if(audioTag.paused){
			audioTag.play();
			$(this).addClass("active");
		}else{
			audioTag.pause();
			$(this).removeClass("active");
		}
	})
	
	//针对UC浏览器,期待用户误点一下屏幕或点击开始游戏按钮后使音频播放
//	$('html').one('touchstart',function(){
//    	audioTag.play();
//	})
	
	//解决ios微信浏览器默认播放音乐
	document.addEventListener("WeixinJSBridgeReady", function () {
		
	 	audioTag.play();
	
	}, false);