Filip Filip - 2 months ago 7
CSS Question

Browser width query - activate viewport

I'm searching for a solution to add the viewport-meta tag only on devices, which screen width is bigger than 680px. If the screen is small than 680px,the responsive style file should be enable instead.

I tried it this way inside the section, but on my iPhone this shows me the viewport settings as well, instead the responsive style.

<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

You had an JavaScript error. Try this:

$(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");
}

});