2

I am looking to make my websites appear the same size on retina and other higher resolution screens that they do on standard screens. That is to say make them optically look the same but with more detail on the higher resolution screens.

So if we had a screen with four times the number of pixels per inch then I would want the height and width of elements to be twice the normal CSS pixel measurements as well as doubling the font size.

I looked into this and it appears that the solution detects the DPI and then loads different CSS. 

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

The thing is these screens all have different DPIs.

iPhone 4/4S and iPod Touch (4th generation) -- 326  
iPad (3rd)/4th generation)  -- 264  
MacBook Pro with Retina Display 15" -- 220
MacBook Pro with Retina Display 13" -- 227

So if we had a an element with a height of say 24px. I would like it to adjust its height to accurately fit whatever the pixel ratio is. IE. do the Maths and do it for all elements.

4

2 回答 2

0

您保持图像尺寸不变，只需为其提供适当的来源。

您还可以输入不同的查询，请参见此处： http ://css-tricks.com/snippets/css/retina-display-media-query/

于 2013-05-06T15:49:54.253 回答
0

我建议您阅读两者dpi和dppx. 当您查看 Retina 显示器时，您需要同时考虑 CSS 像素和物理像素，我相信您知道。

如果您想让网站的组件以相同的物理尺寸显示，那么我认为是可行的方法，但是如果您想区分 Retina 和正常显示，请为您想要覆盖dpi的不同级别添加不同的 CSSdpi需要区分dpi和dppx(dots-per-physcial-inch)

这些文章都帮助了我：

https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

http://drewwells.net/blog/2013/working-with-dppx/

于 2014-02-27T15:19:42.313 回答