iPhone 5屏幕尺寸VS CSS媒体查询[重复]

Posted 2023-03-06

【中文标题】iPhone 5屏幕尺寸VS CSS媒体查询[重复]

【英文标题】：iPhone 5 screen size VS CSS media query [duplicate]

【发布时间】：2012-12-28 20:00:51

【问题描述】：

可能重复：iPhone 5 CSS media query

iPhone 5 技术规范规定屏幕尺寸为 1136 x 640

我的问题是这样的，

对于横向，我将使用 ma​​x-device-width 568px 参考http://www.stephentgilbert.com/mediaqueries/#iPhone

当 iPhone 5 网站上的尺寸显示宽度为 1136 像素时，您能解释一下为什么会这样吗

我知道我在这里混淆了一些基本原理。如果您能给我一个适当的解释，或者将我链接到相关的在线资源，我将不胜感激。

【问题讨论】：

viewport on mobile Safari 不是您所期望的。

感谢@MrSlayer 的链接，非常好的资源！非常感谢:)

【参考方案1】：

iPhone 的 Retina 显示屏意味着 1136x640 屏幕使用 568x320 虚拟像素。每个 CSS 像素由四个物理像素 (2x2) 组成。

由于没有人在 CSS 中说“给我一个 100 像素宽的 div”，因此没有人希望它在像 Retina 显示器这样的高分辨率设备上以一半大小显示，因此它不使用物理像素作为 CSS 像素.

【讨论】：

+1 个伟大的思想家 ;)

@AlienWebguy 也为你 +1。 :-)

感谢 ceejayoz 和 @AlienWebguy 的快速回复。这真的很有帮助！ :)

【参考方案2】：

Retina 显示屏包含的像素是标准显示屏的两倍，但 ios 将分辨率视为用于测量和屏幕输出的标准显示屏。如果不这样做，网站看起来都会非常小并缩小。

【讨论】：

感谢 AlienWebguy 的回答，帮助很大！