css - 不同设备上的视口(viewport)和像素密度使图标变得模糊

Question

我正在使用视口(viewport)和媒体查询来使我的网站适合移动设备。

<meta name='viewport'content='width=device-width,initial-scale=1.0'>

我有一个背景像这样的按钮:

button{
 width:29px;
 height:29px;
 border:1px solid white;
 background:url(add.jpg);
}

在电脑上看起来很简单:

在高像素密度的设备上，需要视口(viewport)标签才能正确显示网站。但是图像被拉伸(stretch)以显示在新的视口(viewport)尺寸中。

如您所见，连上传的图片都变大了。所以 29px 实际上在移动设备上呈现为 58px(取决于哪个设备)。并且图像被拉伸(stretch)。

有什么解决办法吗？我发现的唯一一个是不使用图像。有什么想法吗？

Answer 1

使用 -webkit-min-device-pixel-ratio 和 min-resolution 媒体查询提供 58 x 58 像素的图像以用于更高-DPI 显示。

此示例假设您已经为高 DPI 显示创建了一个名为 add@2x.jpg 的新图像。 (@2x 后缀是原生 iOS 应用程序开发中常用的约定，但您可以随意命名文件。)

button{
  width: 29px;
  height: 29px;
  border: 1px solid white;
  background: url(add.jpg);

  @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { 
    background: url(add@2x.jpg);
    background-size: 29px 29px;
  }
}

重要的是设置 background-size 属性，以便将图像“缩小”到您希望它在 CSS pixels 中呈现的大小。 .

如果您想提供针对更高分辨率的设备(例如 iPhone X)优化的图像，您可以添加额外的媒体查询:

@media (-webkit-min-device-pixel-ratio: 3), (min-resolution: 288dpi) { 
  background: url(add@3x.jpg);
  background-size: 29px 29px;
}