解决Retina屏中网站缩小问题

<meta name="viewport" content="width=device-width, initial-scale=1" />

对Retina及类似显示屏使用媒体查询

对 Retina 及类似显示屏使用媒体查询
有时你可能希望为高像素密度设备设定样式(参见 5.8 节)。一种常见的用例是为这样 的显示屏准备双倍尺寸(2x)的 sprite，从而让图像显得更锋利。(参见 14.10 节。)
假设你的 sprite 的原始尺寸是 200 像素 ×150 像素，其中每个图像都用 1 像素分隔。创 建一个双倍大小的版本(400 像素 ×300 像素)，每个图像之间就有 2 像素的间隔。同时， sprite 中的每个图像都是原始尺寸的 2 倍。针对高像素密度设备，可以使用下面的媒体查询:
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio:1.25), (min-resolution: 120dpi) {
.your-class { background-image:url(sprite-2x.png); background-size: 200px 150px;
}
}
注意 background-size 设置成了原始尺寸，而不是 400 像素 ×300 像素。这样会让图像缩小， 为原始尺寸创建的样式对 2x 版本也有效。