JS 控制VIEWPORT在微信上正常显示

很多同学可能会遇到这种情况,自己写的Html5页面在app中显示都是正常的,但是到了微信中,显示就缩小的将近一半,这是什么原因呢,是因为微信的浏览器内核是他们特有的,和一般的浏览器内核不同,可以通过加下面这段js解决这个问题:

var viewport = document.querySelector(“meta[name=viewport]”);
var winWidths=$(window).width();
var densityDpi=640/winWidths;
densityDpi= densityDpi>1?300*640*densityDpi/640:densityDpi;
if(isWeixin()){
viewport.setAttribute(‘content’, ‘width=640, target-densityDpi=’+densityDpi);
}else{
viewport.setAttribute(‘content’, ‘width=640, user-scalable=no’);
window.setTimeout(function(){
viewport.setAttribute(‘content’, ‘width=640, user-scalable=yes’);
},1000);
}
function isWeixin(){
var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)==”micromessenger”) {
return true;
} else {
return false;
}
}

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值