Skip to content

Instantly share code, notes, and snippets.

@herrernst

herrernst/retina.html

Created September 9, 2011 11:45
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save herrernst/1206008 to your computer and use it in GitHub Desktop.
Save herrernst/1206008 to your computer and use it in GitHub Desktop.
Download ZIP
Retina Images with CSS content
Raw
retina.html
<!doctype html>
<title>Retina Images with CSS content</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<style>
@media all and (-webkit-device-pixel-ratio: 1.5) {
/* e. g. android hi res devices
see: http://developer.android.com/guide/webapps/targeting.html#DensityCSS
*/
#people9 { content: url(//lorempixum.com/300/225/people/9/); }
/* weird bug, seems like a race condition, where image is sometimes not show without redrawing the page; one fix is to also set background */
#people9 { background-image: url(//lorempixum.com/300/225/people/9/); }
}
@media all and (-webkit-min-device-pixel-ratio: 2) {
/* e. g. iphone 4 */
#people9 { content: url(//lorempixum.com/400/300/people/9/); }
/* weird bug, seems like a race condition, where image is sometimes not show without redrawing the page; one fix is to also set background */
#people9 { background-image: url(//lorempixum.com/400/300/people/9/); }
}
</style>
<img id="people9" src="//lorempixum.com/200/150/people/9/" width="200" height="150" alt="People"/>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment