Question

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

我希望这个元标记显示在（最大宽度：1024px）和（最小宽度：768px）...

的设备上

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

此设备的元标记（最小宽度：320像素）和（最大宽度：568像素）......

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

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

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

Answer 1

您无法在元标记according to 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')

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

Answer 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

Answer 3

这是一个类似的简单的JavaScript方法似乎工作....（只考虑屏幕大小）。将其添加到HTML页面的<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>

基于设备显示不同的元标记

3 个答案: