0

Razorビューエンジン、JQuery、およびJQuery-Mobileを使用するASP.NET MVC 4モバイルWebサイトで使用されているメディアクエリを何らかの方法で表示することは可能ですか？はいの場合、どのように？デスクトップでChromeを使用して、ウィンドウのサイズを変更し、影響を受ける要素を調べることで、どちらが使用されているかを確認できることは知っていますが、どちらが使用されているかを確認できるように、ページに表示できるようにしたいと思います。電話で使用されます。1台の電話のポートレートでさまざまなメディアクエリが使用されているようです。つまり、一方向に表示されてから、ポートレートからランドスケープ、ポートレートに再度変更すると、ポートレートビューは以前とは異なるメディアクエリ。

解決：

私はこれを私のレイアウトページの一番下に置きました（それはiphoneで動作しますが、何らかの理由で2.1のような古いandroidでは動作しません）：

@if (true)
    {
        //Change this to false for production

        <text>
        <div id="version" data-role="footer" data-position="fixed"></div>
        <script type="text/javascript">
            function setFooterText(){
                $('#version').text('Media Selector: ' + $('#version').css('content'));
            }
            $(window).bind('resize', function (event) {
                setFooterText();
            }).bind('orientationchange', function (event) {
                setFooterText();
            });
            $(function () {
                setFooterText();
            });
        </script>
        </text>
    }

そしてcssで：

@media all and (max-width: 320px) {
    #version { content:"320px"; }
}
@media all and (max-width: 240px) {
    #version { content:"240px";}
}
etc...

編集：

Android 2.1のブラウザは、カスタムcssプロパティをサポートしていません。ほとんどがHTML5のものだと思います。

4

1 に答える 1

2

できることは、セレクターごとにダミーのクラスと要素を作成し、JavaScriptを使用してその値を調べることができることです。

例えば：

<div id="version"></div>

#version {
    content:"300wide";
    display:none;
}


alert($('#version').css('content'))
于 2012-12-05T19:24:02.367 に答える