Question

我在响应式网站上使用以下两种方法。

HTML

<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">

CSS

img {
    max-width:100%;
}

然而，当它在智能手机上加载时，它似乎放大了。这个网站上最宽的图像是240像素，但它占据了整个屏幕，iPhone 5的视口为640像素。我该如何纠正？

Answer 1

这是viewport元标记的作用。 HTML属性：

content="width=device-width"

指示浏览器configure its viewport设备屏幕宽度 - ＆＃34; dips＆＃34; （设备无关的像素） - 不是物理像素在如果iPhone 5的情况下 - 我相信320 px。你可以通过将这个脚本添加到HTML的底部来测试这个。

<script>
    var el = document.createElement('h2');
    el.textContent = window.innerWidth;
    document.body.appendChild(el);
</script>

如果不熟悉逢低，你可以认为它们近似于经典＆＃34;计算机显示器作为一种解决当前设备屏幕具有不同物理分辨率的事实的方式，因此创建了下降以为开发人员提供公平的竞争环境。然后，CSS引擎将基于320像素宽的HTML元素进行计算在这种情况下，宽度在CSS中以240 CSS像素宽度定义的图像将占据屏幕宽度的大部分另外，为了最大化图像清晰度，大多数领先的移动浏览器都足够聪明，可以使用完整的物理像素密度来显示图像 - 同时将其大小基于CSS像素。

响应式网站：无法在移动设备上正常扩展

1 个答案: