移动端H5开发中的常见问题处理

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、问题之音乐自动播放：

 1     //音乐播放
 2     var audioTag=$("#musicEvent").get(0);
 3     var isPlay=false;
 4         audioTag.play();
 5     /*audioTag.addEventListener("canplay",function(){
 6             if(!isPlay){
 7                 audioTag.play();
 8                 isPlay=true;
 9             }
10     },false);*/
11 
12     $(".musicImg").click(function(){
13         
14         if(audioTag.paused){
15             audioTag.play();
16             $(this).addClass("active");
17         }else{
18             audioTag.pause();
19             $(this).removeClass("active");
20         }
21     })
22     
23     //针对UC浏览器,期待用户误点一下屏幕或点击开始游戏按钮后使音频播放
24 //    $('html').one('touchstart',function(){
25 //        audioTag.play();
26 //    })
27     
28     //解决ios微信浏览器默认播放音乐
29     document.addEventListener("WeixinJSBridgeReady", function () {
30         
31          audioTag.play();
32     
33     }, false); 

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

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

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

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

<video controls class="playVideoEntity baseObj" x5-playsinline="true" webkit-playsinline="true" playsinline="true" src="video/video.mp4" poster=""></video>　

  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端两个页面地址的切换

 <script>
         if ((navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))) {
             window.location.href="mobile/index.html";
         }else{
               window.location.href="pc/index.html"
         }
 </script>

 8、js触发resize，常用于swiper动态修改dom后未更新视图情况

　　　　　　let resizeTime = null;
          const doResize = () => {
              if (resizeTime) clearTimeout(resizeTime);
              resizeTime = setTimeout(function(){
                  //手动触发窗口resize事件
                  if(document.createEvent) {
                      var event = document.createEvent("HTMLEvents");
                      event.initEvent("resize", true, true);
                      window.dispatchEvent(event);
                  } else if(document.createEventObject) {
                      window.fireEvent("onresize");
                  }
                  resizeTime = null
              },300);
          }
          doResize()
          window.onscroll = () => {
            doResize()
          }