微信踩坑集锦

禁用微信 webview 调整字体大小

iOS
在 iOS 下，对网页的 body 元素设置 -webkit-text-size-adjust: 100% !important; 可以覆盖掉微信的样式。

        body {            -webkit-text-size-adjust: 100% !important;        }

Android
在 Android 下，需要通过 WeixinJSBridge 对象将网页的字体大小设置为默认大小，并且重写设置字体大小的方法，让用户不能在该网页下设置字体大小。

        (function() {            if (typeof WeixinJSBridge == "object" && typeof WeixinJSBridge.invoke == "function") {          handleFontSize();        } else {                if (document.addEventListener) {            document.addEventListener("WeixinJSBridgeReady", handleFontSize, false);        } else if (document.attachEvent) {            document.attachEvent("WeixinJSBridgeReady", handleFontSize);            document.attachEvent("onWeixinJSBridgeReady", handleFontSize);  }        }            function handleFontSize() {                        // 设置网页字体为默认大小                WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });                        // 重写设置网页字体大小的事件                WeixinJSBridge.on('menu:setfont', function() {                WeixinJSBridge.invoke('setFontSizeCallback', { 'fontSize' : 0 });                });            }        })();

注意：如果用户之前已经设置过了字体大小，访问网页时会先看到字体被放大后的效果再恢复正常，因为在 WeixinJSBridge 对象初始化完成之后才能通过 WeixinJSBridge 对象的方法设置为默认大小。

IOS点击事件无效

    *{      cursor: pointer;//一些情况下对非可点击元素如(label,span)监听click事件，ios下不会触发      }

file 上传

//安卓得加image/* 才能调起摄像头//设置multiple 可接受多个值

canvas 图片移动端锯齿

window.devicePixelRatio

//获取手机dpr值 ；//据window.devicePixelRatio来画一个更大的Canvas，然后再缩小，原理类似于移动端使用双倍图。//Variables global to the chartvar width = context.canvas.width;var height = context.canvas.height;//High pixel density displays - multiply the size of the canvas height/width by the device pixel ratio, then scale.if (window.devicePixelRatio) {    context.canvas.style.width = width + "px";    context.canvas.style.height = height + "px";    context.canvas.height = height * window.devicePixelRatio;    context.canvas.width = width * window.devicePixelRatio;    context.scale(window.devicePixelRatio, window.devicePixelRatio);   }        var codeCanvas = document.getElementById('c'),        img = document.getElementById('img_code'),        ctx = codeCanvas.getContext('2d');        img.onload = function(){                if(window.devicePixelRatio){                console.log(1)                codeCanvas.width =img.width * window.devicePixelRatio;                codeCanvas.height =img.height * window.devicePixelRatio;                ctx.drawImage( img, 0, 0,codeCanvas.width,codeCanvas.height );                  ctx.scale(window.devicePixelRatio, window.devicePixelRatio);                console.log()                localStorage.setItem('codeSRC',codeCanvas.toDataURL("img/jpg"));                            }else{                console.log(2)                codeCanvas.width =img.width;                codeCanvas.height =img.height;                ctx.drawImage( img, 0, 0,img.width,img.height );                localStorage.setItem('codeSRC',codeCanvas.toDataURL("img/jpg"))            }                }

禁用微信 webview 调整字体大小

IOS点击事件无效

file 上传

canvas 图片移动端锯齿

window.devicePixelRatio

更多相关文章

随机推荐