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

我已将图像添加到网页中。该图像的尺寸为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!');
      }

---

在移动浏览器上，图像与像素的比例是一定的，否则它将无法正确缩放，因为高DPI通常为1080p，而网站通常为1280x1024

这方面的证据很容易找到，例如在chrome developer tools中，按f12转到仿真选项卡，您可以选择各种设备并查看设备像素比率，因为您可以看到所有设备的像素比率都不相同，这是使图像在所有浏览器中正确缩放的唯一方法，注意，它不仅会影响图像，而且会根据设备像素比例渲染站点中的所有内容

---

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

我通过将我的新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 + '"' + '>'; 

---

您的图像是否具有“最大宽度：100%”属性？如果有，请删除它，因为它会导致图像根据其容器调整大小。另外，您是否尝试在样式表中为图像指定固定宽度320px和固定高度248px？也许是强制的，甚至加上“！“重要”子句听起来好像有一些CSS正在为视网膜屏幕进行图像缩放。但我们需要查看一些相关的代码才能确定。我还没有为我的图像设置最大宽度：100%。是的，我试着给图像一个固定的宽度为320px，固定的高度为248px，即使有！重要的是，sameI编辑了我的问题，将包含图像的div附加到另一个div的代码包括在内。