响应式设计:元标记加载

Question

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

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

因此，基本上我需要此<meta />标签才能在屏幕上活跃于宽度比480px大的屏幕上。

可以使用标准的HTML或有jQuery sollution？

Answer 1

css将无法插入这样的元标记（您可以用特定的评论来定位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/