Skip to content

Instantly share code, notes, and snippets.

Created May 12, 2012 00:28
What would you like to do?
<!-- using meta tags? -->
<meta name="mediaalias:mobile" content="min-width: 300px" />
<meta name="mediaalias:tablet" content="min-width: 600px, min-device-pixel-ratio: 1.5" />
<!-- or a new element altogether -->
<media alias="mobile" query="min-width: 300px" />
<media alias="tablet" query="min-width: 600px, min-device-pixel-ratio: 1.5" />
<!-- what's the easiest way to do this w/o jQuery? -->
<script>if (jQuery.inArray('tablet',document.mediaAliases)) { .. } else { .. }</script>
@media screen and (alias: mobile) { ... }
::media-alias(mobile) img { max-width: 100%; } /* a bridge too far? */
Copy link

jonnott commented May 16, 2012

Updated to use mediaAliases array, rather than a single value..

Copy link

jonnott commented May 16, 2012

Perhaps the JS API bit would need a bit more specificity to denote these are actually the rules that matched for the current device, not just the rules themselves..

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment