Leveraging Modernizr and Media Queries
Download as PPTX, PDF
2 likes2,778 views
This document discusses using jQuery Mobile to build responsive websites that can automatically render content for different devices using the same HTML markup. It outlines some of the benefits of jQuery Mobile, such as requiring no JavaScript coding to produce pages and supporting many mobile devices. The document also advocates for using Modernizr and media queries to conditionally load stylesheets and scripts depending on the device, allowing a single HTML file rather than separate mobile and desktop sites. This achieves responsive design without needing separate codebases or relying on user agent strings.
Convert to study materialsBETA
Transform any presentation into ready-made study materialselect from outputs like summaries, definitions, and practice questions.
![Modernizr.load([
{ test : Modernizr.mq(
'only screen and (min-device-width: 320px) and
(max-device-width: 768px)'),
yep : [mobile.js', mobile.css'],
nope : [desktop.js', jquery-ui.js', jquery-
ui.css', 'css/desk.css' ],
complete : function () {//javascript functions here
}
}
]);](https://image.slidesharecdn.com/leveragingmodernizrandmediaqueries-120223151158-phpapp02/85/Leveraging-Modernizr-and-Media-Queries-9-320.jpg)
Leveraging Modernizr and Media Queries
- 1. Leveraging Modernizr and Media Queries: Scripts and Styles by Device Using the Same Markup
- 2. Write less-do more Sencha Touch jQuery Mobile jQTouch Zepto.js This presentation we will be discussing jQuery mobile, which uses HTML5 attributes to render content automatically
- 3. Requires jQuery Uses HTML5 attributes to render content automatically without having to write one line of javascript Can be scripted to produce pages on the fly via AJAX Supports multitude of mobile devices Each page must have HTML5 data-role attributes page and content
- 4. The consensus of developer opinions has been to maintain separate site HTML for mobile, utilizing User Agent identification to serve the version based on device
- 5. User Agent is unreliable, alterable, and does not scale to new devices Contrary to responsive web design Maintenance on two separate html sites needed for all updates Mobile only does not scale well to desktop, looks goofy, simplistic
- 6. jQuery UI and jQuery mobile scripting is very different Use of Document(Ready) versus bind(mobileinit) UI script commands differ, drag and drop , slider, touch events Imminent Collision
- 7. ONE HTML document Based on the media query, serve the css/js files for mobile or desktop version, while content remains same
- 8. Modernizr is an open-source JavaScript library that helps you build the next generation of HTML5 and CSS3-powered websites Using built-inYepNope.js micro-library as Modernizr.load(), you can now combine feature detection with media queries and conditional resource loading
- 9. Modernizr.load([ { test : Modernizr.mq( 'only screen and (min-device-width: 320px) and (max-device-width: 768px)'), yep : [mobile.js', mobile.css'], nope : [desktop.js', jquery-ui.js', jquery- ui.css', 'css/desk.css' ], complete : function () {//javascript functions here } } ]);
- 13. View presented demo page in action (requires valid netid) https://ur.nd.edu/itix12/pre.php View an example (no login required) http://ur.nd.edu/JQM/test.html Download above examples source code Contact Jay Rizzi for any questions regarding this presentation , usage, or opinions on exotic leather shoes