微信踩坑集锦

禁用微信 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 chart
var 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"))
            }
        
        }