Show Different Meta Tag Based on Device

2019-01-28 08:03发布

站内问答 / jQuery
825 3 5

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?

3条回答
Melony?
2楼-- · 2019-01-28 08:18

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.

查看更多
0人赞 添加讨论(0) 举报
再贱就再见
3楼-- · 2019-01-28 08:29

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>
查看更多
0人赞 添加讨论(0) 举报
虎瘦雄心在
4楼-- · 2019-01-28 08:32

Edit: Maybe that can help? 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');
    }
}

Docs: http://jquerymobile.com/demos/1.0a4.1/#docs/api/mediahelpers.html

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)