html - 微信 meta name="viewport" 兼容问题
巴扎黑
巴扎黑 2017-04-17 13:06:07
0
4
705

<script type="text/javascript">
var phoneWidth = parseInt(window.screen.width);
var phoneScale = phoneWidth/640;

var ua = navigator.userAgent;
if (/Android (\d+\.\d+)/.test(ua)){

var version = parseFloat(RegExp.$1);
// andriod 2.3
if(version>2.3){
    document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">');
    // andriod 2.3以上
}else{
    document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">');
}
// 其他系统

} else {

document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">');

}
</script>

如上代码,使页面限制成640px宽度,但是在有的设备上是失效的,有的是高度好像没跟着缩小~
求解

巴扎黑
巴扎黑

全員に返信(4)
阿神

这样设置<meta name=”viewport” content=”width=device-width, initial-scale=1, maximum-scale=1″>,让其自适应

いいねを押す +0
巴扎黑
var width;
if(window.orientation===undefined){
  width = screen.width;
}else{
  if(window.orientation==0){
    width=Math.min(screen.width,screen.height);
  }else{
    width=Math.max(screen.width,screen.height);
  }
}
var scale = width / 640;
document.write('<meta name="viewport" content="width=device-width,initial-scale=" + scale + ",maximum-scale=" + scale + ",minimum-scale=" + scale + ",user-scalable=no">');
いいねを押す +0
Peter_Zhu

<meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">
<script type="text/javascript">
var phoneWidth = parseInt(window.screen.width);
var phoneScale = (phoneWidth/640);

var viewport = document.querySelector("meta[name=viewport]");
if(isWeixin()){

viewport.setAttribute('content', 'width=640, initial-scale = '+phoneScale+', minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+',  target-densitydpi=device-dpi');

}else{

viewport.setAttribute('content', 'width=640');
window.setTimeout(function(){
    viewport.setAttribute('content', 'width=640');
},1000);

}
function isWeixin(){

var ua = navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i)=="micromessenger") {
    return true;
} else {
    return false;
}

}
</script>

最近新找到的解决方法,有效。但其兼容性还需要再测测,基本主流机型是没出现问题

いいねを押す +0
刘奇

content=”width=device-width,让其自适应足矣,不知道为何要你那么做

いいねを押す +0
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!