基于设备显示不同的元标记 [英] Show Different Meta Tag Based on Device

问题描述

我希望这个元标记能显示在（max-width：1024px）的设备上，以及（min-width：768px）...

$ p $ < meta name =viewportcontent =minimum-scale = 1.0 ，maximum-scale = 1.0/>


此元标记适用于（min-width：320px）和（max-width：

 < meta name =viewportcontent =maximum-scale = 1.0/> 
  

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

我可以在meta标签上使用media =仅屏幕和（设备宽度：768px）？

解决方案

您无法在元标记

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

你不用根本不需要使用媒体查询，jQuery提供了一个.width（）快捷键来获得窗口的宽度（你可以在不使用jQuery的情况下做到这一点，但jQuery使你的阅读比纯Javascript更可靠）。 （$（window）.width（）> = 768&& $（window）.width（））≤1024（b
$ b

  ）
 $ （'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'）
  

但是，请记住，一旦窗口调整大小，这些规则将不会更新除非你有代码来做到这一点。

Running into all kinds of meta tag issues today...

I want this meta tag to be displayed on devices that are (max-width: 1024px) and (min-width: 768px)...

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

And this meta tag for devices that are (min-width: 320px) and (max-width: 568px)...

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

Whats the best solution to display the appropriate meta tag?

Can I use "media="only screen and (device-width: 768px)" for example on a meta tag?

解决方案

You can't use the media attribute on meta tags according to Mozilla (although you probably should be able to).

The best option, in my opinion, would probably be client-side Javascript, and assuming you are using jQuery, it should be easy to get a reliable reading of the window width.

You don't need to use media queries at all. jQuery provides a .width() shortcut to get the width of a window (you can do this without jQuery, but jQuery makes your reading more reliable than plain 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')

But, remember that once the window resizes, these rules won't update unless you have code to do that.

这篇关于基于设备显示不同的元标记的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！