如何根据设备宽度设置不同的元标记[重复]答案

【问题标题】：How to set different meta tags acording to device width [duplicate]如何根据设备宽度设置不同的元标记[重复]
【发布时间】：2014-05-26 20:55:13
【问题描述】：

这里我想根据设备宽度设置meta标签，我会详细解释我的问题：

现在，我有一个网站，有移动版和完整版，移动版只能在宽度小于 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">

那么怎么做呢？

【问题讨论】：

标签： html responsive-design meta-tags device-width

【解决方案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>

【讨论】：

【解决方案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')

【讨论】：