iPhone XR / XS / XS Max CSS 媒体查询
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52321212/
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
iPhone XR / XS / XS Max CSS media queries
提问by nathan
What are the correct CSS media queries used to target Apple's 2018 devices: iPhone XR/XS/XS Max ?
用于定位 Apple 2018 年设备的正确 CSS 媒体查询是什么：iPhone XR/XS/XS Max？
回答by nathan
iPhone XR
iPhone XR
/* 1792x828px at 326ppi */
@media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 2) { }
iPhone XS
iPhone XS
/* 2436x1125px at 458ppi */
@media only screen
and (device-width : 375px)
and (device-height : 812px)
and (-webkit-device-pixel-ratio : 3) { }
iPhone XS Max
iPhone XS Max
/* 2688x1242px at 458ppi */
@media only screen
and (device-width : 414px)
and (device-height : 896px)
and (-webkit-device-pixel-ratio : 3) { }
Looking for a specific orientation ?
寻找特定的方向？
Portrait
肖像
Add the following rule:
添加以下规则：
and (orientation : portrait)
Landscape
风景
Add the following rule:
添加以下规则：
and (orientation : landscape)
References:
参考：
回答by darren
The above is correct, but designers need to target the true screen dimensions to avoid scaling, cropping etc. For example the default landscape screen size is actually 808px for an XR.
以上是正确的，但设计师需要针对真实的屏幕尺寸来避免缩放、裁剪等。例如，XR 的默认横向屏幕尺寸实际上是 808px。
So this may be more appropriate: @media (max-width: 808px) {...
所以这可能更合适： @media (max-width: 808px) {...
This will in fact override this query: @media (max-width: 896px) {...
这实际上将覆盖此查询： @media (max-width: 896px) {...
The problem is Apples safe area insets. These can be overcome and get true 896px edge to edge width by adding the following;
问题是苹果的安全区域插图。通过添加以下内容，可以克服这些问题并获得真正的 896px 边到边宽度；
Meta tag: viewport-fit=cover
元标记： viewport-fit=cover
CSS: body { padding: env(safe-area-inset, 0px); }
CSS： body { padding: env(safe-area-inset, 0px); }
The 0px size padding can be changed, or left right top bottom variables added, or adapt for portrait/landscape. But most will already have sufficient padding in their design.
可以更改 0px 大小填充，或添加左上右下变量，或适应纵向/横向。但大多数在他们的设计中已经有足够的填充。
Reference: https://webkit.org/blog/7929/designing-websites-for-iphone-x/
参考：https: //webkit.org/blog/7929/designing-websites-for-iphone-x/
Not tested on other devices but seems they are all adopting same.
未在其他设备上进行测试，但似乎它们都采用相同的方式。
回答by Dick Kirkland
The info from Nathan is great. Thanks for the breakpoints which every browser's inspector doesn't seem to have. Only challenge I ran into was that all of my previous media queries use things like
来自 Nathan 的信息很棒。感谢每个浏览器的检查器似乎没有的断点。我遇到的唯一挑战是我以前所有的媒体查询都使用类似的东西
/* Landscape */
@media only screen
and (min-device-width : 414px)
and (max-device-height : 896px)
and (-webkit-device-pixel-ratio : 3)
and (orientation : landscape) {
whereas the solution above uses only
而上述解决方案仅使用
and (device-width : 414px)
which can cause issues with queries you may already have that use both min-device and max-device.
这可能会导致您可能已经使用 min-device 和 max-device 的查询出现问题。
Thanks very much for these sizes and DPRs!
非常感谢这些尺寸和 DPR！
