Question

我在网页上添加了图片。该图片的尺寸为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!');
      }

Answer 1

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

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

将所有图片设置为百分比，100％或其他方式，以使其相应缩放

Answer 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 + '"' + '>';

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

2 个答案: