如何处理看起来不好的背景缩小

Question

我正在工作的网站在某些页面元素后面大量使用了平行条纹背景(它基本上是一个1x2像素的背景图像，它被平铺以创建一种复古的水平带状效果)。

当这些页面被放大查看时(例如在手机上)，用户会看到破坏效果的云纹图案。

如何(a)在用户查看缩小的页面时降级为平面背景色，或者(b)强制背景以1:1的比例呈现而不进行缩放？

Answer 1

如果您使用的是单个图像(而不是磁贴)，则可以使用background-size: 100% CSS属性强制浏览器不超过图像尺寸。

由于您使用的是磁贴，因此您需要控制显示窗口的大小以控制磁贴的数量--您可以使用下面的META标签来阻止移动设备上的缩放(放大或缩小)，并使用媒体查询来自定义CSS样式：

<meta name="viewport" content="width=device-width, 
   initial-scale=1,
   maximum-scale=1, 
   user-scalable=0"/> <!--320-->

Answer 2

在响应式网站或移动目标网站中，显示缩放效果会很好。如果您不想这样做，可以通过针对缩放设备的媒体查询来控制背景图像的显示。

@media (-webkit-min-device-pixel-ratio: 2),(min-resolution: 192dpi) { 
    your css can come here
}