Survey's the client browser to detect what type of experience should be served to the user.
No media queries are used. Instead, this script first tries to detect common mobile devices. If it can, it will serve that experience (e.g., iPhone will always get the 'phone' experience, regardless of browser width).
If the device is not detected, then it falls back to using the browser width.
Simply include the script anywhere in your HTML:
<script type="text/javascript" src="/path/to/browser.survey.min.js"></script>
The body tag will be given one of the following classes based on which experience should be served to the user:
phone: If the device is a known phone (e.g., iPhone) or is less than 480px wide.
tablet: If the device is a known tablet or is between 481-1024px.
desktop: If the device is greater than 1024px width and is not a known mobile device.
Hide an element when in desktop mode:
body.desktop #myelement { display: none; }
Show an element when a phone or tablet:
body.phone #myelement,
body.tablet #myelement {
display: block;
}
This script gives you the ability to load CSS files ONLY for a specific experience. For example, don't load any styles (or subsequent images) for desktop if the site is being viewed on a phone. This allows you to segregate the image sizes and styles that are served for different devices, subsequently saving bandwidth and having your site load faster on mobile devices.
To load a CSS file dynamically, simply include a <link> tag in your HTML with various data-href-* attributes, specifying which files to load for which experience.
<link rel="stylesheet" data-href-phone="phone.css" data-href-tablet="tablet.css" data-href-desktop="desktop.css" />
If you only have developed a "phone" and "desktop" experience, you could use something like this:
<link rel="stylesheet" data-href-phone="phone.css" data-href-tablet="default.css" data-href-desktop="default.css" />
Media Queries are NOT used in this script. You may, however, still use media queries in your CSS if you wish.
None! This script is pure JavaScript and does not require jQuery, AngularJS, or anything else!
Chrome, Firefox 3.5+, IE 8+, Opera 10+, Safari 3.2+
MIT LICENSE