Как установить различные мета-теги acording ширине устройства

Question

Здесь я хочу, чтобы установить мета-тег в соответствии с шириной устройства, я объясню мою проблему более подробно:

Теперь у меня есть сайт, который имеет мобильной версии и полной версии, мобильная версия будет работать только на мобильных устройствах, только их ширина меньше 480 пикселей, а полная версия работает с другими ширинами.

Проблема возникает, когда я пытаюсь установить мета-тег, если установить его как:

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

Я хорошо работает на мобильных и веб-сайт появляется увеличенному в таблетке.

И если я использую это:

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

Я отлично работает на рабочем столе и таблетки, и убедитесь, что версия мобильники не отображается на мобильных телефонах.

Так что же такое решение, я хочу некоторые вещи, как, что в моем заголовке 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"> 

Так как это сделать?

Answer 1

вы можете попробовать с помощью метода JQuery дописывания

как

<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')