logo标签列表

iPhone6和iPhone 6 Plus的设备宽度CSS视口尺寸是多少？

ioscssiphoneresponsive-designviewport
33
iPhone 6和iPhone 6 Plus刚刚宣布。但是通常情况下，手机规格不会以CSS像素或DPR的meta viewport设备宽度大小表示，即width=device-width,initial-scale=1。
已经进行了预测，推测375/414像素的viewport宽度，但仍然不清楚......
注：请不要推测或发布已知的整体设备分辨率或规格答案，这不是我要寻求的。我想要的是默认响应式纵向和横向viewport宽度（以像素为单位）。
4个回答
56
43

(CSS) {iPhone 6}的设备宽度为375px，{iPhone 6 Plus}的设备宽度为414px。请注意，{iPhone 6 Plus}报告window.devicePixelRatio = 3（虽然实际上不是真正的3 DPR）。

更新1：只是为了澄清，我相信这不是预测，而是经过测试的事实。请参见更详细和可靠的参考资料。如果您有疑问，可以等待设备发布。

更新2：对于启用了{iPhone 6}上的显示缩放的用户，在Mobile Safari中的CSS视口会回退到320px（就像{iPhone 5}一样）；对于{iPhone 6 Plus}，它会回退到375px（就像{iPhone 6}一样）。

我一直在等待源代码。显然，它首先从Xcode中删除，然后根据Apple网站上现有的413px断点进行验证。因此，375px和414px必须准确无误。感谢您的指引。 - hexalys
8
想要了解完整尺寸（包括高度）的人：iPhone 6 是 375x667，而 iPhone 6 Plus 是 414x736。 - aaaidan
感谢您提供的更新2！ - Alexander Poleschuk
1
我花了将近半天的时间来弄清楚为什么我的iPhone6+设备的CSS更改在我的iPhone上没有显示出来。然后我才发现，一直以来，我的视口大小都报告为375像素，因为我的设备显示器被缩放了。 - Ross
7
当您截取屏幕时，图像大小为1334x750像素。那么为什么浏览器只使用320像素？ - Curtis
-1

设备宽度确实为375x667，但这并不意味着视口就是那个尺寸。以下是一个经验样本。请注意，数字已舍入到10的倍数。 使用示例数据比较设备宽度和报告的视口

这就是为什么我提到了“device-width” CSS 视口大小。意味着默认的设备宽度或“device-height”，而不是视口宽度或高度。 - hexalys
你是说视口不是那个尺寸吗？实际上，视口确实是375x667，而分辨率要高得多... - oldboy
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接