不要工作retina.js

-1

为什么不申请@ 2x和@ 3倍的图像？为什么retina.js不起作用？我一直在做文档。为什么发生这种情况？如何解决这个问题？

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

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

 
    </div> 
 

 

 
    <script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.1.0/retina.min.js"></script> 
 
    </body> 
 
</html>

来源

2016-12-27 z_u_l

必须有v2.1.0中的一个错误，我改剧本的来源2.0.0，它按预期工作：

<script type="text/javascript" charset="utf-8" src="https://cdnjs.cloudflare.com/ajax/libs/retina.js/2.0.0/retina.min.js"></script>

来源

2016-12-28 06:44:14 keeg

非常感谢你的比赛！但是，当我在服务器上放置retina.js时，它不起作用。你有什么想法为什么不在服务器上工作retina.js？ –

您使用的是https：// cdnjs.cloudflare.com/ajax/libs/retina.js/2.0.0/retina.min.js或您自己的存储在本地服务器上的副本吗？ – keeg

我正在使用存储在服务器上的自己的副本 –

不要工作retina.js

回答

相关问题