Find file
Fetching contributors…
Cannot retrieve contributors at this time
102 lines (73 sloc) 2.96 KB
<!DOCTYPE html>
<title>FutureFly - Responsive Image Polyfill</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="420">
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1">
<link rel="stylesheet" href="stylesheets/style.css">
<script type="text/javascript" src="./futurefly.js"></script>
_bTestResults = {};
var vote;
var voted = false;
saveVote = function(v) {
if (!voted) {
vote = v;
_bTestResults = {
'Image Visible': vote
testKey = 'agt1YS1wcm9maWxlcnINCxIEVGVzdBiZsv8KDA';
newScript = document.createElement('script'),
firstScript = document.getElementsByTagName('script')[0];
newScript.src = '' + testKey + '?callback=checkVote';
firstScript.parentNode.insertBefore(newScript, firstScript);
console.log('saved vote');
voted = true;
checkVote = function() {
r = (vote === 1) ? "no" : "yes";
$("#" + r).fadeOut();
console.log('got response');
<body style="">
<h4>Responsive Image Polyfill</h4>
<div class="text">
<h2>The Problem:</h2>
<p>The current HTML spec does not allow for multiple image URLs based on screen size, necessitating the use of complex Javascript hacks to supply smaller images to mobile devices.</p>
<h2>The Solution: </h2>
<p>Here's the HTML you'll use to load responsive images in your document:</p>
<script src=""></script>
<source src="" media="max-width: 480px;">
<source src="" media="min-width: 480px; max-width: 640px;">
<source src="" media="min-width: 640px;">
<img class="responsive-img" src="">
<img src="">
<div class="text">
<p>This suggested spec change would create a syntactic placeholder for mobile browsers to find mobile versions of image URLs. Inside each &lsaquo;img&rsaquo; tag would be a &lsaquo;source&rsaquo; tag, containing a "media" and "src" parameter. The "media" parameter would contain the media query string that would trigger the use of the alternate image URL.</p>
<p>Legacy browsers would simply use the default URL provided by the wrapper &lsaquo;img&rsaquo; tag. Mobile browsers could look for &lsaquo;source&rsaquo; tags contained by &lsaquo;img&rsaquo; tags, and validate the media query to determine which URL to use to load the image.</p>
<a href="">
Submit Issues on <a href="">Github</a>