Instantly share code, notes, and snippets.

Embed
What would you like to do?
mediaAliases
<head>
<!-- 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" />
</head>
<!-- what's the easiest way to do this w/o jQuery? -->
<script>if (jQuery.inArray('tablet',document.mediaAliases)) { .. } else { .. }</script>
<style>
@media screen and (alias: mobile) { ... }
::media-alias(mobile) img { max-width: 100%; } /* a bridge too far? */
</style>
@jonnott

This comment has been minimized.

Copy link
Owner

jonnott commented May 16, 2012

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

@jonnott

This comment has been minimized.

Copy link
Owner

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