css - Retina 分辨率屏幕的转换站点

Question

Apple 的新Macbook Pro有一个 15 英寸的屏幕，分辨率为 2880x1800。目前它正在缩放网站，导致图像像素翻倍，并且布局也出现双倍缩放。

作为一名 Web 开发人员，我如何着手转换我现有的 PHP/XHTML/CSS 网站以利用高 DPI 屏幕？

Answer 1

以下页面提供了一个不错的贯穿：

http://www.webmonkey.com/2012/06/make-sure-your-site-looks-good-on-the-new-retina-macbook-pro/

图标字体提供了一种解决方案，@media 类型允许使用其他样式：

例子：

@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
    .logo {
        background: url(/path/to/my/highreslogo.png) no-repeat;
        background-size: 100px 100px;
        /* rest of your styles... */
    }
}

Answer 2

该脚本可能会有所帮助 - http://retinajs.com/。您将@2x 添加到为视网膜显示而剪切的图像名称中，其余的由脚本完成。剪切图像时的一个陷阱是，所有内容都必须能被 2 整除——你已经知道了，但这让我感到困惑，因为我完美地制作了我的按钮，但忽略了它们周围的 1px 阴影/线条，doh！:(

编辑：刚刚看到一篇关于这个主题的非常好的文章/教程：

http://benfrain.com/how-to-serve-high-resolution-website-images-for-retina-displays-new-ipadiphone4/

Answer 3

也许视网膜 iPhone/iPad 的解决方案可以在视网膜 Mac 上运行。指示更高分辨率的图像，例如：

background-image: url(your-image@2x.png);