iPhone 5 屏幕尺寸 VS CSS 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14325577/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
iPhone 5 screen size VS CSS media query
提问by Mizanur Chowdhury
Possible Duplicate:
iPhone 5 CSS media query
可能重复：
iPhone 5 CSS 媒体查询
The iPhone 5 tech spec states screen dimension of 1136 by 640
iPhone 5 技术规格说明屏幕尺寸为 1136 x 640
My question is this,
我的问题是这个
For landscape, ff I am to use the max-device-width of 568pxrefer to http://www.stephentgilbert.com/mediaqueries/#iPhone
对于横向，我将使用568px的最大设备宽度，请参阅http://www.stephentgilbert.com/mediaqueries/#iPhone
can you explain why that works when the dimension stated on the iPhone 5 site says the width would be 1136px
你能解释为什么当 iPhone 5 网站上规定的尺寸表示宽度为 1136px 时它会起作用吗？
I know I'm mixing up with some of the fundamentals here. I'd appreciate if you could provide me with a proper explanation and perhaps link me to relevant online resources.
我知道我在这里混淆了一些基础知识。如果您能向我提供适当的解释，并可能将我链接到相关的在线资源，我将不胜感激。
回答by ceejayoz
The iPhone's Retina display means the 1136x640 screen uses 568x320 virtual pixels. Each CSS pixel is made up of four physical pixels (2x2).
iPhone 的 Retina 显示屏意味着 1136x640 屏幕使用 568x320 虚拟像素。每个 CSS 像素由四个物理像素 (2x2) 组成。
Since no one who says "give me a 100px wide div here" in CSS wants it to show up at half-size on a higher-resolution device like a Retina display, it doesn't use the physical pixels as CSS pixels.
由于没有人在 CSS 中说“在这里给我一个 100 像素宽的 div”，希望它在更高分辨率的设备（如 Retina 显示器）上以一半大小显示，因此它不会将物理像素用作 CSS 像素。
回答by AlienWebguy
The Retina display contains twice as many pixels as the standard display, but iOS treats the resolution as the standard display for measurement and screen output. If it didn't, websites would all look very tiny and zoomed out.
Retina 显示器包含的像素是标准显示器的两倍，但 iOS 将分辨率视为标准显示器进行测量和屏幕输出。如果没有，网站将看起来非常小并且缩小。
