Question

Is it possible to somehow display which media query is being used in an ASP.NET MVC 4 mobile website that uses Razor view engine, JQuery, and JQuery-Mobile? If yes then how? I know that I can use Chrome on the desktop to see which one is being used by resizing the window and inspecting an affected element but I would like to be able to display it on the page that way I can see for sure which one is being used on a phone. It seems like different media queries are used in portrait for a single phone…. what I mean is that it will look one way and then I change from portrait to landscape to portrait again and then the portrait view looks like it is using a different media query than before.

Solution:

I put this at the bottom of my layout page ( it works on iphone but not older androids like 2.1 for some reason ):

@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>
    }

and then in the css:

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

Edit:

Android 2.1’s browser does not support custom css properties. I think it is mostly an HTML 5 thing.

Answer 1

What you can do is create a dummy class and element for each selector that you can then inspect using JavaScript and examine its value.

For example:

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

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


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