您如何处理客户端的浏览器缩放？

我在页面上有很多图像，一个图库。我希望图像保持清晰，因此我不进行任何浏览器缩放，而是使用图像的原始尺寸。

但是，这仅在浏览器缩放级别为100％时有效。当我增加或减少缩放级别时，图像质量下降。

默认情况下，某些客户端实际上具有不同的缩放级别。我想知道，您将如何处理它，我们将如何处理呢？

干杯

我认为大多数其他答案都没有抓住重点：这并不是要覆盖用户的偏好，而是要在用户设备为每个CSS像素分配多个物理像素（即“ 参考像素 ”）的常见情况下提供最佳质量的图像。”，导致浏览器按比例放大图像，使其像素化并呈颗粒状。

我在下面建议的解决方案，但首先是实现这种情况的四种方法：

• 最稀有： 用户选择放大。没什么大问题，因为这是他们的选择。
• 出乎意料的普遍： 默认情况下，用户的浏览器被放大。例如，许多高像素密度的Windows计算机默认情况下会放大到125％或更高，而Firefox最近（令人困惑！）做到了，在这种情况下，它告诉用户将实际放大到125％时放大到100％，让他们挠头，想知道为什么一切突然看起来很粗糙。
• 很常见：大多数Android设备（和其他设备？）的像素比都大于1。这意味着实际上每个“ CSS像素”都使用一个以上的物理像素进行显示-因此设置为200px x 200px的图像width: 200px; height: 200px;实际上会缩放该200px x 200px的图像跨越200 x 200像素，可能会变得粒状。
• 很常见：许多现代的Apple设备都具有“ 视网膜显示器 ”。这基本上与像素比率为2的Android设备相同，但具有更好的营销效果，并且具有一些自定义属性，可以按名称进行检测。

这些中的任何一个都将导致John出现令人惊讶的粒状图像画廊的问题。

我希望有人能够很好地解决这个问题，但是现在，这是我的首选方法，从最有效但最不普遍的方法开始：

1. 如果可能，请使用vector-SVG（如果仍需要支持IE8，则使用Raphael.js）。实际上，这只是图标，图表等的选项，而绝不是照片的选项。由于需要处理，非常复杂的SVG在低端移动设备上也可能很笨重。
2. 如果可能，请检测设备的像素比率，并根据该比率提供图像。这也可以解决Windows上的Firefox问题，因为Windows上的Firefox在放大和缩小时会更改其像素比率读数。缺点是，它成为棘手的编码问题，涉及服务器和客户端的开发工作。

3. 如果不可能使用1.和2.，但这确实很重要，并且图像质量比例如加载时间更重要，只需将图像加倍即可。

   • 这就是Google在其首页上使用徽标的方式：将538px x 190px PNG图像压缩在269px x 95px的容器中。它也与响应图像的工作原理大致相同。

   • 这曾经被认为是不好的做法，因为旧版本的IE在缩小图像方面很糟糕，但是现在很少使用，并且比高像素密度的屏幕要少得多。它仍然有些不理想，因为它将增加图像大小并因此增加加载时间-这是您需要逐案判断的折衷方案。

   • 将大小加倍是很常见的，因为很少有设备的比率大于2，几乎没有用户放大超过200％，并且将图像缩放50％比其他数量更干净。
4. 如果不可能1、2，并且加载时间对于3来说不是一个优先事项，那么我不知道有任何其他选择，我的建议是不要担心，因为互联网上有一半的站点都存在相同的问题，并且您网站上有此问题的人在其他网站上也会有此问题。糟糕，Windows上的Firefox甚至像素化了自己的UI按钮 ...

正如DA01所说，您不应对此做任何事情。

缩放是用户指定的选项，因此受其控制。他们决定修改的设置不应该由您负责。

您可以考虑使用不同的浏览器和版本，而不能使用其他浏览器和版本，但是合理地说，您不应该考虑用户的缩放比例。

当然，您可能会占到125％或150％（甚至没有必要）。但是200％，300％还是更多？只是没有任何意义。

如果用户使用高对比度窗口主题怎么办？如果他们不断使用放大镜怎么办？谁在乎？

理想情况下，您的网站足够灵活，不会在很小的缩放差异之间产生真正的不同，但是随着缩放，图像的质量会下降，但这不是您的责任。

当然，这只是我的意见，但是我工作的公司也明确告诉客户我们不支持他们的缩放偏好。

其他人针对您将要遇到的问题给出了一些很好的提示，而我在这一领域还不够出色，无法提供出色的教程，但是...

您可能想要设计一个响应站点，该站点根据用户的分辨率/设备进行调整，然后您可能正在寻找将请求时将图像切换到较高或较低分辨率文件的代码，而不是拉伸和压缩您拥有的图像。

当我上次尝试执行此操作时，我使用了media-query.js和picturefill.js。参见：http : //sensitivedesign.is/resources/images/picture-fill。我有一个3列的布局，其中一些图像会跨越两列...当浏览器窗口足够小时，大图像将切换到较小的res版本，该版本只有一列宽。用户的浏览器只会加载他们需要的文件的版本。（就我而言，砌体插件会移动所有东西以适应）。

当然，那么您的用户必须启用了JavaScript ...

您不能强迫用户动手。用户设置不是您要使用的。设置并规避设置是一个坏主意，这可能是用户做某事的原因。无论哪种情况，您都不能保证各种设备上的任何东西。

实际上，如果您进入技术方面，它会变得更加有趣。您确实可以通过网页提供通往王国的钥匙。看到用户下载了该网页，并且该用户现在可以使用该网页执行任何操作。您无法控制这一层，因为它毕竟是在用户计算机上运行的，他们可以随心所欲。即使stackexhange在我的计算机/移动设备上看起来也不像在您的计算机/移动设备上看起来一样。我最终会自动更改GUI的某些方面，以修复2个渲染错误并添加了2个快捷方式。

在HiDPI屏幕上放大图像的烦人行为会导致照片模糊（又称摄影师的噩梦），这也困扰了我一段时间。我还想知道没有简单的CSS属性可以禁用图像属性。

我当前使用CSS的解决方案如下所示：

@media only screen and (min--moz-device-pixel-ratio: 1.25),
    (-o-min-device-pixel-ratio: 5/4),
    (-webkit-min-device-pixel-ratio: 1.25),
    (min-device-pixel-ratio: 1.25) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.25 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.5),
    (-o-min-device-pixel-ratio: 3/2),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.5 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 1.75),
    (-o-min-device-pixel-ratio: 7/4),
    (-webkit-min-device-pixel-ratio: 1.75),
    (min-device-pixel-ratio: 1.75) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 1.75 - var(--pic-width) + var(--pic-width));
        }
}
@media only screen and (min--moz-device-pixel-ratio: 2.00),
    (-o-min-device-pixel-ratio: 2),
    (-webkit-min-device-pixel-ratio: 2.00),
    (min-device-pixel-ratio: 2.00) {
        img {
            --pic-width: 460px;
            width: calc(var(--pic-width) / 2.00 - var(--pic-width) + var(--pic-width));
        }
}

如果需要，下一步将使用类来定义和设置不同的图像大小。我不知道一种动态获取图像大小的方法。CSS函数attr（）似乎对此不起作用。

因此，这将更多是编程问题。但是，使用JQuery甚至只是平面CSS，您都可以根据用户的屏幕宽度，屏幕高度等显示不同的图像。

同样，尽管这可能不是要问的stackexchange。

您可以简单地通过网站顶部的HTML进行添加

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

开发人员不建议对每种类型的网站都建议这样做，但应满足您的要求。

希望对您有所帮助：css规则转换：在body标签或其他标签上缩放-不完美，请参见此处：

/programming/23099849/stop-firefox-dpi-scaling-when-windows-setting-is-at-125/42755741#42755741