<!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>