libs/js/jquery-mobile-1.1.0/docs/api/mediahelpers.html

   1 <!DOCTYPE html>
   2 <html>
   3         <head>
   4         <meta charset="utf-8">
   5         <meta name="viewport" content="width=device-width, initial-scale=1">
   6         <title>jQuery Mobile Docs - Responsive Layout Helpers</title>
   7         <link rel="stylesheet"  href="../../css/themes/default/jquery.mobile.css" />
   8         <link rel="stylesheet" href="../_assets/css/jqm-docs.css"/>
   9
  10         <script src="../../js/jquery.js"></script>
  11         <script src="../../docs/_assets/js/jqm-docs.js"></script>
  12         <script src="../../js/"></script>
  13
  14 </head>
  15 <body>
  16
  17 <div data-role="page" class="type-interior">
  18
  19         <div data-role="header" data-theme="f">
  20                 <h1>Responsive Layout Helpers</h1>
  21                 <a href="../../" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
  22                 <a href="../nav.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
  23         </div><!-- /header -->
  24
  25         <div data-role="content" data-theme="c">
  26
  27                         <div class="content-primary">
  28                         <h2>Media Query Helper Classes</h2>
  29 <p class="ui-bar-e ui-body"><strong>Note: This feature was deprecated in beta, and removed in 1.0rc1. We recommend using CSS3 Media Queries instead.</strong> To support older versions of Internet Explorer, check out <a href="https://github.com/scottjehl/Respond">respond.js</a>, a fast &amp; lightweight polyfill for min/max-width CSS3 Media Queries.</p>
  30                         <p class="ui-bar-e ui-body">If you still need this feature, you can find the code here: <a href="https://raw.github.com/jquery/jquery-mobile/38d7ad8848f00b0921bf4ae723f3ad199eb851c1/js/jquery.mobile.media.classes.js">jquery.mobile.media.classes.js</a></p>
  31
  32                         <p>jQuery Mobile adds classes to the <code>HTML</code> element that mimic browser orientation and common min/max-width CSS media queries. These classes are updated on load, resize and orientationchange, allowing you to key off these classes in your CSS, to create <a href="http://www.alistapart.com/articles/responsive-web-design/">responsive layouts</a> - even in browsers that don't support media queries! </p>
  33
  34                         <h3>Orientation Classes </h3>
  35
  36                         <p>The HTML element will always have a class of either <code>"portrait"</code> or <code>"landscape"</code>, depending on the orientation of the browser or device. You can utilize these in your CSS like this:</p>
  37                         <pre>
  38                         <code>
  39 .portrait {
  40         /* portrait orientation changes go here! */
  41 }
  42 .landscape {
  43         /* landscape orientation changes go here! */
  44 }
  45                         </code>
  46                         </pre>
  47
  48                         <h3>Min/Max Width Breakpoint Classes</h3>
  49                         <p>By default, we create min and max breakpoint classes at the following widths: <code>320</code>,<code>480</code>,<code>768</code>,<code>1024</code>. These translate to classes that look like this: <code>"min-width-320px"</code>, <code>"max-width-480px"</code>, and are meant to be used as a replacement of (or in addition to) the media query equivalents they mimic.</p>
  50 <pre>
  51                         <code>
  52 .myelement {
  53         float: none;
  54 }
  55 .min-width-480px .myelement {
  56         float: left;
  57 }
  58                         </code>
  59 </pre>
  60
  61                         <p>Many plugins in jQuery Mobile leverage these width breakpoints. For example, form elements float beside their labels when the browser is wider than 480 pixels. The CSS to support this behavior for form text inputs looks like this:</p>
  62
  63 <pre>
  64                         <code>
  65 label.ui-input-text {
  66         display: block;
  67 }
  68 .min-width-480px label.ui-input-text {
  69         display: inline-block;
  70 }
  71                         </code>
  72 </pre>
  73
  74                         <h3>Adding Width Breakpoints</h3>
  75                 <p>To utilize width breakpoints of your own, jQuery Mobile exposes the <code>$.mobile.addResolutionBreakpoints </code> function, which accepts either a single number or array of numbers that will be added to the min/max breakpoints whenever they apply.</p>
  76 <pre>
  77                         <code>
  78 //add a min/max class for 1200 pixel widths
  79 $.mobile.addResolutionBreakpoints(1200);
  80
  81 //add min/max classes for 1200, and 1440 pixel widths
  82 $.mobile.addResolutionBreakpoints([1200, 1440]);
  83                         </code>
  84 </pre>
  85
  86 <h3>Running Media Queries</h3>
  87 <p>jQuery Mobile provides a function that allows you to test whether a particular CSS Media Query applies. Simple call <code>$.mobile.media()</code> and pass a media type or query. If the browser supports that type or query, and it currently applies, the function will return true. If not, it'll return false.</p>
  88
  89 <pre>
  90                         <code>
  91 //test for screen media type
  92 $.mobile.media("screen");
  93
  94 //test  a min-width media query
  95 $.mobile.media("screen and (min-width: 480px)");
  96
  97 //test for iOS retina display
  98 $.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)");
  99
 100                         </code>
 101 </pre>
 102
 103         </div><!--/content-secondary -->
 104
 105         <div class="content-secondary">
 106
 107                 <div data-role="collapsible" data-collapsed="true" data-theme="b" data-content-theme="d">
 108
 109                                 <h3>More in this section</h3>
 110
 111                                 <ul data-role="listview"  data-theme="c" data-dividertheme="d">
 112
 113                                         <li data-role="list-divider">API</li>
 114                                         <li><a href="../../docs/api/globalconfig.html">Configuring defaults</a></li>
 115                                         <li><a href="../../docs/api/events.html">Events</a></li>
 116                                         <li><a href="../../docs/api/methods.html">Methods &amp; Utilities</a></li>
 117                                         <li data-theme="a"><a href="../../docs/api/mediahelpers.html">Responsive Layout</a></li>
 118                                         <li><a href="../../docs/api/data-attributes.html">Data attribute reference</a></li>
 119                                         <li><a href="../../docs/api/themes.html">Theme framework</a></li>
 120                                 </ul>
 121                 </div>
 122         </div>
 123
 124 </div><!-- /content -->
 125
 126 <div data-role="footer" class="footer-docs" data-theme="c">
 127                 <p>&copy; 2011-12 The jQuery Foundation</p>
 128 </div>
 129
 130 </div><!-- /page -->
 131
 132 </body>
 133 </html>