Question

我正在寻找一种解决方案，只在设备上添加viewport-meta标签，屏幕宽度大于680px。如果屏幕小于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" />');
    }

}

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

2 个答案: