How to set different meta tags acording to device width

Question

Here I want to set the meta tag according to the device width, I'll explain my problem in more details:

Now, I have a website that has a mobile version and full version, the mobile version will works on the mobile devices only that their width is smaller than 480px, and the full version works on the other widths.

The problem appears when I try to set the meta tag, if I set it as:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

I works well at the mobile and the website appears zoomed in the tablet.

And if I use this:

<meta name="viewport" content="width=1100, initial-scale=1, maximum-scale=1">

I works fine in the desktop and tablet, and for sure the mobiles version doesn't appear on the mobiles.

So what is the solution, I want some thing like that in my header HTML:

if(device-width <= 480) 
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

elseif(device-width > 480) 
    <meta name="viewport" content="width=1100, initial-scale=1, maximum-scale=1">

So how to do this ?

Answer 1

you can try with jquery append method

like

<script type="text/javascript">
if(device-width <= 480){
$('head').append(' <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">');
}
elseif(device-width > 480)
{
$('head').append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">'); 
}

    </script>

Answer 2

if ($(window).width() >= 768 && $(window).width()) <= 1024)
 $('meta').attr('name', 'viewport').attr('content', 'minimum-scale=1.0, maximum-scale=1.0').appendTo('head')
else if ($(window).width() >= 320 && $(window).width() <= 568)
$('meta').attr('name', 'viewport').attr('content', 'maximum-scale=1.0').appendTo('head')