瀏覽器寬度查詢 - 激活視口

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" />'); 
    } 

}