图片模糊+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,红袖读书分享出的就可以,基本确定是:微信白名单导致(域名)。
希望对有需要的人一些参考意义。有异议和更好办法的请留言。