根据设备显示不同的元标签

Question

今天遇到各种元标签的问题......

我希望这个元标签在设备的(max-width:1024px)和(min-width:768px)范围内显示...

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

这个meta标签是为宽度在320像素到568像素之间的设备而设置的...

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

如何展示适当的元标记(meta tag)是最佳解决方案？

比如说，我能在一个meta标记上使用"media="only screen and (device-width: 768px)" 吗？

- Mike Barwick

Answer 1

您不能在标签上使用媒体属性 根据Mozilla的说法（虽然您应该能够这样做）。

在我看来，最好的选择可能是客户端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')

但是，请记住，一旦窗口大小调整，这些规则将不会更新，除非您有相应的代码进行更新。

- matthewbauer

Answer 2

编辑： 也许这可以帮助？ 根据设备分辨率更改视口

// 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

该链接是关于jQuery Mobile的媒体帮助函数的API文档。

- Miro

---

不好意思，我不使用PHP。我用ASP.NET。但我更喜欢客户端代码，比如JS。 - Mike Barwick

哦，有没有一种直接的jQuery方法。我不想仅仅为了更改一个meta标签而包含jQuery移动js。你知道吗？ - Mike Barwick

Answer 3

这里有一个类似的纯JavaScript方法，似乎可以工作...（仅考虑屏幕大小）。将以下代码添加到HTML页面的部分：

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

- Glen Little