针对Iphone 7和7 plus的CSS媒体查询

Question

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

Answer 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 */}

Answer 2

使用精确的屏幕尺寸不是我建议的。您将遇到一系列会破坏布局的屏幕尺寸。

你应该设计它，它可以在 300px 之间的任何宽度工作，并说 950px。然后考虑所有设备。