Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

A polyfill for the new meta-variable, responsive image proposal

branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

README.md

Intro

This is a polyfill to a responsive image proposal by @MattWilcox, see here for more details.

Demo

See here.

Usage

Grab the library, and include jQuery and then fire away!:

<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
  <meta charset=utf-8 />
  <meta name="case" value="500/500" media="only screen and (min-width:0)"/>
  <meta name="case" value="700/700" media="only screen and (min-width:500px)"/>
  <meta name="case" value="1024/1024" media="only screen and (min-width:700px)"/>
<title>Demo</title>
</head>
<body>
  <img width='100%' src="http://placekitten.com/{case}/">
  <script src="js/metavar.js">
</body>
</html>

Browser Support

Going from worst to best:

Wooden Spoons (and just as responsive)

IE6-8, these browsers get the "{case}" folder fallback currently

Bronze Medalists (CSS media query support)

IE9, Opera and Safari?, these get the correct image for their screen size when the page is loaded, but don't respond to resizing (it's on the todo list!)

Silver Medalists (matchMedia & listeners)

Firefox, IE10? and chrome, these get the full polyfill experience

Gold Medalists (native)

None (....yet.....)

Made by @PhilIngrey

Something went wrong with that request. Please try again.