Question

是否有可能以某种方式显示在使用Razor视图引擎，JQuery和JQuery-Mobile的ASP.NET MVC 4移动网站中使用哪个媒体查询？如果是，那怎么样？我知道我可以在桌面上使用Chrome，通过调整窗口大小和检查受影响的元素来查看正在使用的是哪个，但我希望能够在页面上显示它，我可以确定哪一个是用在手机上。似乎不同的媒体查询用于一部手机的肖像....我的意思是它将看起来一种方式，然后我再次从纵向更改为横向再到纵向，然后纵向视图看起来像是使用了与以前不同的媒体查询。

解决方案：

我把它放在我的布局页面的底部（它适用于iphone，但不是因为某些原因而不是像2.1这样的旧机器人）：

@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属性。我认为它主要是HTML 5。

Answer 1

你可以做的是为每个选择器创建一个虚拟类和元素，然后使用JavaScript检查它并检查它的值。

例如：

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

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


alert($('#version').css('content'))

如何显示正在使用的媒体查询

1 个答案: