高分辨率图像在 Android 上模糊，但在使用 Lightview 模态的 iPhone 上不模糊答案

【问题标题】：High resolution images blurry on Android but not iPhones using Lightview modals高分辨率图像在 Android 上模糊，但在使用 Lightview 模态的 iPhone 上不模糊
【发布时间】：2014-05-29 02:10:20
【问题描述】：

.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 images on stock android browser，因为我的问题非常相似，但我没有在任何地方设置任何 z-index 或 position: fixed。我的问题是在Samsung Galaxy S3 和S4 上的4.0.4、4.1.2 和4.2.2 版本的Android 默认浏览器上产生的（这些详细信息由我们的测试人员提供给我）。

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

我会尽可能发布示例图片。

【问题讨论】：

你使用什么设备？
三星 Galaxy S3 和 S4

标签： android html css image modal-dialog

【解决方案1】：

这是a strange bug 与 S3。在图片标签上设置这些 both 就可以了：

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

【讨论】：