html - 响应式设计：元标签加载

Question

我正在寻找这种结构，我知道这是不可能的，但我正在寻找另一种方法。

@media all and (min-width: 480px) {
 <meta name="viewport" content="width=device-width, initial-scale=1,
 maximum-scale=1" />
}

所以基本上我需要这个<meta />标签只在大于480px宽度的屏幕上才有效。

这可以用标准 HTML 完成还是有 jQuery 解决方案？

Answer 1

CSS 将无法插入这样的 META 标记（您可以使用 IE 特定注释来定位 IE，但我怀疑这对您有帮助）。

但是，您可以使用 JavaScript 动态注入此标记：

//set a flag so the meta tag doesn't get loaded more than once
var metaLoaded = false;
$(window).on("resize.my-meta", function () {

    //check if the meta tag has already been loaded, if not check the viewport width
    if (!metaLoaded && $(window).width() >= 480) {

        //the viewport width is at or greater than 480, so add the meta tag to the DOM
        $("head").append('<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />');

        //set flag so we don't add the meta tag twice
        metaLoaded = true;
    }
}).trigger("resize.my-meta");//this runs the resize event handler to setup the initial state

这是一个演示：http: //jsfiddle.net/5GxNH/