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

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... */
    }
}