1、问题之合成海报：

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

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

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

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

　　注意：合成区域内的图片需为本地图片

海报大小设置：（需根据实际可以截取的图像调整最低高度）
var webWidth = document.documentElement.clientWidth;
var webHeight = document.documentElement.clientHeight;
var pageW_max = webWidth * 1.93;
var pageH_d=(webHeight+50) > pageW_max ? pageW_max : webHeight+50;
pageH_d = pageH_d < (pageW_max * 0.9) ? (pageW_max * 0.9) : pageH_d;
$(".posterCompoundPage").css("height",pageH_d+"px");

//准备海报
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);

　4、问题之video视频在手机中全屏播放影响体验：

　　解决：在video标签中加以下参数：

　　解决全屏播放加x5-playsinline="true"、webkit-playsinline="true"、playsinline="true"这三个参数就好，另外没有必要不要再加（类似x5-video-player-fullscreen="true"）额外的参数，不然还是会全屏播放。

　　更多的视频处理可以参考使用：https://videojs.com

5、关于长屏短屏页面中元素太满的处理方式

　　通过获取屏幕的宽高比，来适当调整元素的定位或大小

var webWidth = document.documentElement.clientWidth;
var webHeight = document.documentElement.clientHeight;
var screenRatio = webWidth / webHeight;
console.log('宽高比：',screenRatio);
if(screenRatio > 0.6){

if(screenRatio > 0.63){

}

}

6、阻止页面默认事件

document.body.addEventListener('touchmove', function (e) {
　　e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
}, {passive: false}); //passive 参数不能省略，用来兼容ios和android

$('.pageBox').on('touchmove', function (event) {
　　event.preventDefault();
});

7、移动和pc端两个页面地址的切换