Html Iphone 7 和 7 plus 的 CSS 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42528836/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS media queries for Iphone 7 and 7 plus
提问by Vivek Kumar
I need to check some additional CSS specific to iphone 7 & 7 plus, does iphone 6 and iphone 7 have same physical height / width? If possible please mention the media query.
我需要检查一些特定于 iphone 7 和 7 plus 的附加 CSS，iphone 6 和 iphone 7 是否具有相同的物理高度/宽度？如果可能，请提及媒体查询。
回答by Chris Cook
http://stephen.io/mediaqueries/has a list of media queries for specific Apple products, but you should try to avoid styling for each device individually, since this will increase the amount you need to write by a lot. Your issues might be caused by the browser being used, rather than the specific device. Check for that before styling for one device.
http://stephen.io/mediaqueries/有一个针对特定 Apple 产品的媒体查询列表，但您应该尽量避免单独为每个设备设置样式，因为这会增加您需要编写的大量内容。您的问题可能是由所使用的浏览器引起的，而不是由特定设备引起的。在为一台设备设计样式之前检查一下。
This website suggests that it does have the same resolution as the iPhone 6, so the same query will target both. https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
该网站建议它确实具有与 iPhone 6 相同的分辨率，因此相同的查询将同时针对两者。https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
iPhone 6 in portrait & landscape
iPhone 6 纵向和横向
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px) { /* STYLES GO HERE */}
iPhone 6 Plus in portrait & landscape
iPhone 6 Plus 纵向和横向
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) { /* STYLES GO HERE */}
回答by Nitesh Goyal
Using exact screen dimensions is not something i would advise. You will run into a host of screen sizes that will break your layout.
我不建议使用精确的屏幕尺寸。您将遇到许多会破坏您的布局的屏幕尺寸。
You should just design so it works at any width between 300pxand say 950px.Then all devices are taken into account.
你应该只是设计它可以在300px和950px之间的任何宽度下工作。然后考虑所有设备。
