高分辨率图像在安卓系统上模糊，但在使用Lightview模式的iPhone上则不然

Question

我有.png和.jpg中的图像显示在Lightview模式中，这些图像在Android手机上变得模糊。iPhone不受影响。模态和图像的大小由视图端口大小自动设置。

HTML（Lightview动态构建）

<div class="lv_window">
   <div class="lv_content">
      <div class="lv_content_wrapper">
         <img class="lv_content_image" />
      </div>
   </div>
</div>

CSS

.lv_window {
  position: absolute;
  top: 50%;
  left: 50%;
  padding: 0;
  overflow: hidden;
  text-align: left;
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  display:block;
  /* width, height, top, and left are dynamically set depending on viewport */
}
.lv_content {
  position: absolute;
  padding: 0;
  margin: 0;
  overflow: hidden;
  background: url('somegif.gif');
  display: block;
  /* width, height, top, and left are dynamically set depending on viewport */
}
.lv_content .lv_content_wrapper {
  float: left;
  clear: both;
  position: relative;  
}
.lv_content_image {
  float: left;
  border: 0;
  clear: both;
  padding: 0;
  margin: 0;
  background: none;
  /* width and height are dynamically set depending on viewport in px */
}

我使用MVC为每个图像提供一个源（src），因为我有一个不同的图像，这取决于它们在选择中选择的状态。否则，所有CSS和HTML都由Lightview创建。

我在股票安卓浏览器上浏览了其他帖子，比如Blurry图片，因为我的问题非常相似，但我在任何地方都没有设置任何z索引或position: fixed。我的问题是在Samsung Galaxy S3和S4上的4.0.4、4.1.2和4.2.2版本的Android默认浏览器上生成的（这些详细信息由我们的测试人员提供给我）。

我已经尝试将类.lv_content_image的Lightview CSS float重写为none，但图像质量仍然没有变化。

我会在可能的时候发布一个示例图片。

Answer 1

这是S3的一个奇怪错误。在图像标签上设置这两个就可以了：

opacity: 0.999999;
-webkit-backface-visibility: hidden;

不幸的是，完全相同的方法会在S4上导致错误，并且S3和S4具有相同的屏幕宽度/高度，320×640。因此，与其编写像素精确的@media样式表，不如使用：

var ua = window.navigator.userAgent.toLowerCase();
window.platform = {
    ...
    isS3: ua.match(/gt-i9300/i) !== null
}
if (platform.isS3) {
    $('img').css{
        'opacity': 0.9999,
        'webkitBackfaceVisibility': 'hidden'
    }
}