Iphone 7 和 7 plus 的 CSS 媒体查询 [关闭]答案

【问题标题】：CSS media queries for Iphone 7 and 7 plus [closed]Iphone 7 和 7 plus 的 CSS 媒体查询 [关闭]
【发布时间】：2017-07-20 14:37:51
【问题描述】：

我需要检查一些特定于 iphone 7 和 7 plus 的附加 CSS，iphone 6 是否和 iphone 7 具有相同的物理高度/宽度？如果可能，请提及媒体查询。

【问题讨论】：

【解决方案1】：

http://stephen.io/mediaqueries/ 有一个针对特定 Apple 产品的媒体查询列表，但您应该尽量避免为每个设备单独设置样式，因为这会大大增加您需要编写的数量。您的问题可能是由正在使用的浏览器引起的，而不是由特定设备引起的。在为一台设备设计样式之前检查一下。

该网站表明它确实具有与 iPhone 6 相同的分辨率，因此相同的查询将针对两者。 https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

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 : 414px) 
and (max-device-width : 736px) { /* STYLES GO HERE */}

【讨论】：

【解决方案2】：

我不建议使用精确的屏幕尺寸。您会遇到许多会破坏布局的屏幕尺寸。

你应该设计成它可以在 300px 和 950px 之间的任何宽度下工作。 然后将所有设备都考虑在内。

【讨论】：