浏览器宽度查询——激活视口

Question

我正在寻找一种仅在屏幕宽度大于 680 像素的设备上添加 viewport-meta 标记的解决方案。如果屏幕小于 680px，则应启用响应式样式文件。

我在本节中以这种方式尝试过，但在我的 iPhone 上它也显示了视口设置，而不是响应式样式。

<script>
if ($(window).width() < 680) {   
alert("Smartphone Device");
    document.write('<link rel="stylesheet" type="text/css" href="css/responsive.css" />');
}
else {
 document.write('
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <meta name="viewport" content="width=1100" />
 <meta name="viewport" content="user-scalable=no">');
}
</script>

Answer 1

您遇到了 JavaScript 错误。试试这个：

$(document).ready(function(){

if ($(window).width() < 680) {   
alert("Smartphone Device");
    document.write('<link rel="stylesheet" type="text/css" href="css/responsive.css" />');
}
else {
 $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0">','<meta name="viewport" content="width=1100" />','<meta name="viewport" content="user-scalable=no">');
 alert("Desktop");
}

});

Answer 2

感谢您的帮助。这个解决方案对我来说很好用：

if (matchMedia) {
    var mq = window.matchMedia("(min-width: 680px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

function WidthChange(mq) {
    if (mq.matches) {
        alert("Desktop");
        $('head').append('<meta name="viewport" content="width=1100px" />');
    } else {
        alert("Smartphone Device");

        $('head').append('<meta name="viewport" content="width=device-width, initial-scale=1.0" />');
    }

}

浏览器宽度查询——激活视口

Browser width query - activate viewport

javascript

css

viewport

responsive