iphone - .@2x 是如何工作的

Question

我是格式化代码以适应 iphone（尤其是 4 和 5）的新手。您是否向 css 添加了两个图像（没有媒体查询）？或者您是否需要带有该背景图像的媒体查询？

Answer 1

基本上是的，您需要执行以下操作：

    .repeatingPattern {
     background: url(../images/bgPattern.png) repeat;
     background-size: 100px 100px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
     .repeatingPattern {
          background: url(../images/bgPattern@2x.png) repeat;
     }
}

但如果您使用的是 jquery，这样做会更有效：

<img class="hires" alt="" src="search.png" width="100" height="100" />
<script type="text/javascript">
$(function () {

    if (window.devicePixelRatio == 2) {

          var images = $("img.hires");

          // loop through the images and make them hi-res
          for(var i = 0; i < images.length; i++) {

            // create new image name
            var imageType = images[i].src.substr(-4);
            var imageName = images[i].src.substr(0, images[i].src.length - 4);
            imageName += "@2x" + imageType;

            //rename image
            images[i].src = imageName;
          }
     }

});
</script>