Created
May 24, 2012 20:43
-
-
Save zoe-edwards/2784122 to your computer and use it in GitHub Desktop.
Detect high-DPI and use data-hidpi to replace img src
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Are we using a hidpi screen? | |
var hidpi = window.devicePixelRatio > 1 ? true : false; | |
if (hidpi) { | |
// Replace img src with data-hidpi | |
$('img[data-hidpi]').each(function() { | |
// If width x height hasn't been set, fill it in | |
if ($(this).attr('width') == undefined) { | |
$(this).attr('width', $(this).width()); | |
} | |
if ($(this).attr('height') == undefined) { | |
$(this).attr('height', $(this).height()); | |
} | |
$(this).attr('src', $(this).data('hidpi')); | |
}); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Create an image like so
But add a
data-hidpi
attribute for the @2x version.Then include this script on the page load.