<!DOCTYPE html> <html>
<head> <style type="text/css" media="screen"> body { text-align: center; font-family: helvetica, sans-serif; padding-bottom: 25px; } h2 { margin-top: 35px; } .responsive { width: 80%; margin: auto; } .responsive img { display: block; width: auto; height: auto; max-width: 100%; } .wrapper { background: #eaeaea; margin: 35px auto; width: 1170px; padding: 25px 25px 45px; border-radius: 5px; } .img-wrapper { display: inline-block; width: 30%; background: rgba(0, 0, 0, .06); padding: 0 15px 25px; vertical-align: middle; border-radius: 3px; } .img-wrapper p { height: 75px; font-size: 13px; } .bg, .bg2, .bg3 { height: 150px; } </style> <!-- Uncomment one of the following CSS links to test the behavior of a different CSS preprocessor.--> <!-- <link type="text/css" rel="stylesheet" href="styles/retina.scss.css"> --> <!-- <link type="text/css" rel="stylesheet" href="styles/retina.sass.css"> --> <link type="text/css" rel="stylesheet" href="styles/retina.less.css"> <script type="text/javascript"> // Spoof the browser into thinking it is Retina // comment the next line out to make sure it works without retina window.devicePixelRatio = 3; </script> </head> <body> <div class="wrapper"> <h1>retina.js test environement</h1> <h2>Img Tags</h2> <!-- This image does not opt in. It will always be shown at 1x --> <div class="img-wrapper"> <h3>Img tag @1x</h3> <p> This image does not opt in. It will always be shown at 1x. </p> <img src="google-logo.png"> </div> <!-- This image should be shown at 2x all retina environments, but shown at 1x in non-retina environments. --> <div class="img-wrapper"> <h3>Img tag @2x</h3> <p> This image should be shown at 2x all retina environments, but shown at 1x in non-retina environments. </p> <img src="google-logo.png" data-rjs="2"> </div> <!-- This image should be shown at 3x in all environments 3x and up, shown at 2x in 2x environments, and shown at 1x in non-retina environments. --> <div class="img-wrapper"> <h3>Img tag @3x</h3> <p> This image should be shown at 3x in all environments 3x and up, shown at 2x in 2x environments, and shown at 1x in non-retina environments. </p> <img src="google-logo.png" data-rjs="3"> </div> <h2>Background Images</h2> <!-- This image does not opt in. It will always be shown at 1x --> <div class="img-wrapper"> <h3>Bg @1x</h3> <p> This image does not opt in. It will always be shown at 1x. </p> <div class="bg"></div> </div> <!-- This image should be shown at 2x all retina environments, but shown at 1x in non-retina environments. --> <div class="img-wrapper"> <h3>Bg @2x</h3> <p> This image should be shown at 2x all retina environments, but shown at 1x in non-retina environments. </p> <div class="bg2"></div> </div> <!-- This image should be shown at 3x in all environments 3x and up, shown at 2x in 2x environments, and shown at 1x in non-retina environments. --> <div class="img-wrapper"> <h3>Bg @3x</h3> <p> This image should be shown at 3x in all environments 3x and up, shown at 2x in 2x environments, and shown at 1x in non-retina environments. </p> <div class="bg3"></div> </div> <h2>Rarer Cases</h2> <!-- This image does not opt in. It will always be shown at 1x --> <div class="img-wrapper"> <h3>External URL w/ Naming Convention</h3> <p> This image is pulled in externally. Retina.js should still work on external files. Thanks to <a href="http://powinteractive.com">POWINTERACTIVE</a> for unwittingly allowing us to borrow their logo :) </p> <img src="http://powinteractive.com/wp-content/uploads/2015/03/pow-circle-logo.png" data-rjs="2" /> </div> <!-- This image does not opt in. It will always be shown at 1x --> <div class="img-wrapper"> <h3>External URL w/o Naming Convention</h3> <p> retina.js continues to provide basic support for manually indicating a direct URL for a "retina" image. Note that this technique does not allow for multiple images to be associated with multiple pixel densities. </p> <img src="https://www.google.com/logos/2012/doisneau12-hp.jpg" data-rjs="http://www.google.com/logos/2012/wilhelm_busch-2012-hp.jpg" style="max-width: 100%" /> </div> <!-- This image should be shown at 2x all retina environments, but shown at 1x in non-retina environments. --> <div class="img-wrapper"> <h3>Inline Background Image</h3> <p> This image should be shown at 2x all retina environments, but shown at 1x in non-retina environments. </p> <div data-rjs="2" style="background: url(google-logo.png) center center no-repeat; background-size: 300px 99px; width: 300px; height: 99px; margin: 0 auto;"></div> </div> </div> <script type="text/javascript" charset="utf-8" src="retina.min.js"></script> </body>
</html>