html - 如何根据设备宽度设置不同的元标记

Question

这里我想根据设备宽度设置元标记，我将更详细地解释我的问题：

现在，我有一个网站，有移动版和完整版，移动版只能在宽度小于 480px 的移动设备上运行，而完整版适用于其他宽度。

当我尝试设置元标记时出现问题，如果我将其设置为：

<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 append 方法

喜欢

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