Skip to content

Instantly share code, notes, and snippets.

@jonnott

jonnott/gist:2663318

Created May 12, 2012 00:28
Show Gist options
  • Save jonnott/2663318 to your computer and use it in GitHub Desktop.
Save jonnott/2663318 to your computer and use it in GitHub Desktop.
Download ZIP
mediaAliases
Raw
gistfile1.html
<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
Copy link
Author

jonnott commented May 16, 2012

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

@jonnott
Copy link
Author

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