3

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

我希望此元标记显示在 (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)"例如，我可以在元标记上使用吗？

4

3 回答 3

3

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

但是，请记住，一旦窗口调整大小，这些规则将不会更新，除非您有代码来执行此操作。

于 2013-06-30T21:32:21.483 回答
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

于 2013-06-30T20:50:57.187 回答
0

Here is a similar plain JavaScript approach that seems to work.... (only considering screen size). Add this in head <head> section of the HTML page:

<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>
于 2017-04-15T03:26:16.170 回答