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

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

2 个答案: