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添加到为视网膜显示剪切的图像名称中，脚本完成其余部分。切割图像时的一个缺陷是所有东西都必须被两个整除 - 你已经知道了，但这让我感到惊讶，因为我完全按下了我的按钮而忽略了它们周围的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);

为视网膜分辨率屏幕转换网站

3 个答案: