Skip to content

Instantly share code, notes, and snippets.

@jonnott jonnott/gist:2663318
Created May 12, 2012

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 Author

commented May 16, 2012

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

@jonnott

This comment has been minimized.

Copy link
Owner Author

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
You can’t perform that action at this time.