防止移动浏览器上的图像缩放答案

【问题标题】：Prevent image scaling on mobile browsers防止移动浏览器上的图像缩放
【发布时间】：2014-08-08 13:32:40
【问题描述】：

我在网页中添加了一张图片。图像尺寸为 320X248。但是，当它在 iphone safari 上渲染时，图像尺寸更小。当我使用 640X496 的图像时，它被渲染为 320X248。 Android Nexus 也会发生同样的事情。那么是否有一种通用方法来确保我的图像以 320X248 呈现，在所有移动浏览器的默认缩放状态下。请注意，我没有在我的网页中使用元标记来禁用用户缩放或缩放。

      var divToAppendTo = ref.config.tarDiv;
      var new_html = '';
      var em_url = 'data:image/gif;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs%3D';
      var rand_id = 'inview_banner_image_' + Math.random();

      var new_html = 
          '<div  style="width:320px;height:248px;background-color:black;margin:0 auto;"   onclick="inviewEndBannerClicked()"' + '><img id="' + rand_id + '" src="' + em_url + '" style="width:320px;background-color:black;display:block;margin-left:auto;margin-right:auto"' + '></div>';

      divToAppendTo.innerHTML = new_html;
      if(ref.config.inview_bnr_url !== undefined && ref.config.inview_bnr_url) {
          var imageNode = document.getElementById(rand_id);
          imageNode.src = ref.config.inview_bnr_url;
      }
      else {
          //console.log('End banner url undefined!');
      }

【问题讨论】：

你的图片有'max-width:100%'属性吗？如果是这样，请将其删除，因为它会导致图像根据其容器调整大小。
其他棕褐色，您是否尝试在样式表中为您的图像提供 320 像素的固定宽度和 248 像素的固定高度？也许强迫它，甚至添加 '!important' 子句可能会有所帮助
听起来好像有一些 CSS 正在为 Retina 屏幕进行图像缩放。但是我们需要查看一些相关的代码才能确定。
我没有为我的图片设置 max-width:100%。是的，我尝试为图像提供 320 像素的固定宽度和 248 像素的固定高度，即使使用 !important，但仍然相同
我已经编辑了我的问题以包含将包含图像的 div 附加到另一个 div 的代码。

标签： javascript html css

【解决方案1】：

在移动浏览器上存在图像与像素的比率，否则由于高 DPI 通常为 1080p 而网站更常见于 1280 x 1024，因此无法正确缩放。

这方面的证据很容易找到，例如在 chrome 开发人员工具中按 f12 转到仿真选项卡，在那里您可以选择各种设备并查看设备像素比率，因为您可以看到它在所有设备上都不相同，唯一的让您的图像在所有浏览器中正确缩放的方法是使用百分比注意它不仅会影响图像，而且您网站中的所有内容都将根据设备像素比呈现。

将所有图像设置为百分比、100% 或其他方式，以使它们相应地缩放

【讨论】：

【解决方案2】：

我通过修改我的 new_html 解决了这个问题：

var new_html = '<img src="' + em_url + '" ' + 'style="width:inherit;height:auto;background- color:red;display:block;margin-left‌:auto;margin-right:auto" id="' + rand_id + '"' + '>';

【讨论】：