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

Question

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

我在部分内部以这种方式尝试过，但在我的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" />'); 
    } 

}