iPhone 6 的纵向和横向宽度是否仍然相同？

Question

我似乎找不到这个问题的答案，而且我无法使用 iPhone 6 或 6 Plus。

所有以前的 iOS 设备总是将其宽度报告为纵向模式下的设备宽度，即使它们知道自己处于横向模式。我想知道我们是否需要为具有新屏幕尺寸的新设备创建更专业的媒体查询，或者它们是否最终在横向模式下报告了正确的宽度。

谢谢！

• 我应该补充一点，当我们检查width 或device-width 时，我主要询问的是CSS 媒体查询。例如，较旧的 iOS 设备在纵向和横向模式下都会将 device-width 报告为 768 像素。

Answer 1

对于 iOS，确定设备视口宽度的最佳做法是使用 CSS orientation 媒体查询。 768px 仅适用于较旧的 iPad。以下是您应该为每个设备实例使用的查询列表：

---

iPhone 6：

@media only screen 
and (min-device-width : 375px) 
and (max-device-width : 667px) { /* STYLES GO HERE */}

iPhone 6 Plus：

@media only screen 
and (min-device-width : 540px) 
and (max-device-width : 960px) { /* STYLES GO HERE */}

如果您希望将 CSS 应用于特定于纵向或横向的上下文，那么您还需要针对该特定情况添加一个 orientation 查询。