图片模糊+QQ浏览器下滑时候出现“网页由某某提供”影响滑动

1 图片是用2倍图。  我这次出现模糊的话:每个图片外套一层div就解决了。(讲不出道理)其中试过把png改成jpg,也没啥用。

2 QQ浏览器打开网页,往下翻,会出现“网页由某某提供”会滑动影响自己的网页效果。去掉办法如下:

 

<script type="text/javascript">
      (function(id){
        var app = document.getElementById(id);
        var touchstartY;
        app.addEventListener("touchstart", function(event) {
          var events = event.touches[0] || event;
          touchstartY = events.clientY; //获取触摸目标在视口中的y坐标
          console.log("touchstartY:"+touchstartY);
        }, false);
 
        app.addEventListener("touchmove", function(event) {
          var events = event.touches[0] || event;
          console.log("end:"+event.changedTouches[0].pageY);
          var tempY = event.changedTouches[0].pageY - touchstartY;


          //注意document.body.scrollTop始终为0
          var scrollTop = document.body.scrollTop || document.documentElement.scrollTop; //获取滚动部分的高度
          var clientHeight = document.documentElement.clientHeight; //获取手机屏幕高度(可视部分高度)
          var scrollHeight = document.body.scrollHeight; //所有内容的高度

          // console.log("events.clientY:"+events.clientY);
          // console.log("touchstartY:"+touchstartY);
          // console.log("scrollTop:"+scrollTop);
          // console.log("clientHeight:"+clientHeight);
          // console.log("scrollHeight:"+scrollHeight);
          // console.log("tempY:"+tempY)
          // if(tempY>0){
          //   console.log("11禁止到顶下拉")
          //   event.preventDefault(); //禁止到顶下拉
          // }
          //向下滑
          if(events.clientY > touchstartY && scrollTop === 0 && event.cancelable) {
            // console.log("11禁止到顶下拉")
            event.preventDefault(); //禁止到顶下拉
          }
          else if(scrollTop + clientHeight > scrollHeight && event.cancelable) {
            // console.log("22禁止到底上拉")
            event.preventDefault(); //禁止到底上拉
          }
        }, false);
      })('app');
    </script>

但是这个办法,不能完全解决。一直上滑,一直下滑,都可以。先上再下,还是会出现“网页由某某提供”,会滑动。

解决办法参考:https://blog.csdn.net/qq_33291022/article/details/94574962

 

3 分享到微信里的网页,不能直接唤起app,必须经过右上角浏览器打开,而jd,红袖读书分享出的就可以,基本确定是:微信白名单导致(域名)。

 

希望对有需要的人一些参考意义。有异议和更好办法的请留言。

 

posted @ 2020-02-19 11:10  仔行天下  阅读(529)  评论(0编辑  收藏  举报