0

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

解决方案：

我把它放在我的布局页面的底部（由于某种原因，它适用于 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 属性。我认为这主要是 HTML 5 的东西。

4

1 回答 1

2

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

例如：

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

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


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