1

私はこの構造を手に入れようとしています。それが不可能であることはわかっていますが、別の方法を探しています。

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

したがって、基本的に、このタグは幅<meta />よりも大きい画面でのみアクティブにする必要があります。480px

これは標準のHTMLで実行できますか、それともjQueryソリューションがありますか？

4

1 に答える 1

0

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/

于 2012-10-24T17:49:17.950 に答える