基于设备显示不同的元标记
今天遇到各种元标记问题……
我希望这个元标记显示在（最大宽度：1024px）和（最小宽度：768px）的设备上…
这个元标记为（最小宽度：320像素）和（最大宽度：568像素）……
什么是显示适当元标记的最佳解决方案？
我可以在元标记上使用"media="only screen and (device-width: 768px)"吗？
根据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')
但是，请记住，一旦窗口resize，除非您有代码执行此操作，否则这些规则不会更新。
编辑：也许这可以帮助？ 根据设备分辨率更改视口
// 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
这是一个类似的简单的JavaScript方法似乎工作….（只考虑屏幕大小）。 在HTML页面的head 部分添加：