ホームページ  >  に質問  >  本文

html - 微信 meta name="viewport" 兼容问题

<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宽度,但是在有的设备上是失效的,有的是高度好像没跟着缩小~
求解

巴扎黑巴扎黑2712日前707

全員に返信(4)返信します

  • 阿神

    阿神2017-04-17 13:08:07

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

    返事
    0
  • 巴扎黑

    巴扎黑2017-04-17 13:08:07

    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
  • 天蓬老师

    天蓬老师2017-04-17 13:08:07

    <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
  • 怪我咯

    怪我咯2017-04-17 13:08:07

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

    返事
    0
  • キャンセル返事