Media queries for max-width-xxx are all true?

Media queries for max-width-xxx are all true?

What is the rationale behind the idea of this?

Tested on iPod touch:


  1. <!doctype html>
  2. <head>
  3.   <meta charset="utf-8">
  4.   <title></title>
  5.   <meta name="HandheldFriendly" content="True">
  6.   <meta name="MobileOptimized" content="320"/>
  7.   <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, maximum-scale=1.0">
  8.   <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.css" />
  9.   <script src="js/libs/modernizr-1.7.min.js"></script>
  10. </head>
  11. <body>
  12.     <div data-role="page">
  13.         <div data-role="content"></div>
  14.     </div>
  15.     <!-- jQuery mobile -->
  16.     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
  17.     <script src="http://code.jquery.com/mobile/1.0a4/jquery.mobile-1.0a4.min.js"></script>
  18.     <script>
  19.     $(function(){
  20.         $('.ui-page').bind('orientationchange', printDebugQueries);
  21.         printDebugQueries();
  22.     });
  23.     function printDebugQueries() {
  24.         console.log("Landscape: " + $('html').hasClass('landscape') + "   |   Portrait: " + $('html').hasClass('portrait'));
  25.         console.log("min-width: XXX | max-width: XXX");
  26.         var arr = [320, 480, 960, 768, 1024];
  27.         for(var i = 0; i < arr.length; i++)
  28.             console.log(arr[i] + "px :" + $.mobile.media("screen and (min-width: "+arr[i]+"px)") + "        | " + $.mobile.media("screen and (max-width: "+arr[i]+"px)"));
  29.     }
  30.     </script>
  31. </body>
  32. </html>

While min-width returns expected result, max-width do not. All of max-width return true.