根据设备显示不同的元标记答案

【问题标题】：Show Different Meta Tag Based on Device根据设备显示不同的元标记
【发布时间】：2013-06-27 23:56:54
【问题描述】：

今天遇到各种元标记问题...

我希望此元标记显示在 (max-width: 1024px) 和 (min-width: 768px)...的设备上...

<meta name="viewport" content="minimum-scale=1.0, maximum-scale=1.0" />

这个元标记适用于 (min-width: 320px) 和 (max-width: 568px)...

<meta name="viewport" content="maximum-scale=1.0" />

显示适当元标记的最佳解决方案是什么？

我可以在元标记上使用"media="only screen and (device-width: 768px)"吗？

【问题讨论】：

标签： jquery html media-queries meta-tags

【解决方案1】：

您不能在元标记 according to Mozilla 上使用 media 属性（尽管您可能应该可以使用）。

在我看来，最好的选择可能是客户端 Javascript，并且假设您使用的是 jQuery，应该很容易获得可靠的窗口宽度读数。

您根本不需要使用媒体查询。 jQuery 提供了一个 .width() 快捷方式来获取窗口的宽度（你可以不使用 jQuery 来做到这一点，但是 jQuery 让你的阅读比普通的 Javascript 更可靠）。

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】：

编辑：也许这有帮助？ changing viewport based on device resolution

// Check for iPhone screen size
if($.mobile.media("screen and (min-width: 320px)")) {
    // Check for iPhone4 Retina Display
    if($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
        $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
    }
}

文档：http://jquerymobile.com/demos/1.0a4.1/#docs/api/mediahelpers.html

【讨论】：

不使用php，对不起。 ASP.NET。虽然更喜欢客户端代码。喜欢js。
嗯，有没有直接的 jQuery 方式。我不想仅仅为了一个元标记更改而包含 jQuery mobile js。你知道吗？

【解决方案3】：

这是一种类似的纯 JavaScript 方法，似乎可行....（仅考虑屏幕大小）。在 HTML 页面的 head <head> 部分添加：

<script>
  if (window.screen.availWidth < 600) {
    document.write('<meta name="viewport" content="width=device-width, initial-scale=1">');
  } else {
    document.write('<meta name="viewport" content="width=600">');
  }
</script>

【讨论】：