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将无法插入这样的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/

响应式设计：元标记加载

1 个答案: