如何区分 Iphone x media query 和 Iphone 6,7,8 plus？

Question

我正在创建 ionic 4 angular 应用程序，并为 iPhone 编写媒体查询。我写 Iphone x 和 Iphone 6,7,8 加上媒体查询，但 Iphone x 媒体查询也适用于 Iphone x 以及 Iphone plus.how 互相区分？下面显示了我正在使用的媒体查询。

 /* iphone 6+, 6s+, 7+, 8+ */
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) {}

    /* iphone X */
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3){}

Answer 1

因为这些可能不正确。

您在其中一个上使用 -width，在另一个上使用 -height，因此这些媒体查询不会被专门限制。

我假设 iPhone X 是最大的设备，但您从宽度 375px 向上应用规则...这将包括宽度为 414px 及以上的设备。

这似乎应该涵盖所有 iPhone 场景ios:

/* ----------- iPhone 6, 6S, 7 and 8 ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: landscape) { 

}

/* ----------- iPhone 6+, 7+ and 8+ ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 414px) 
  and (max-device-width: 736px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

/* ----------- iPhone X ----------- */

/* Portrait and Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3) { 

}

/* Portrait */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 

}

/* Landscape */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-width: 812px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: landscape) { 

}

您可以获得更多设备：

Media Queries for Standard Devices | CSS-Tricks

平台模式

此外，不要忘记 Ionic 允许您使用 sass 中的 ios 选择器将设备限制为 ios 模式：

Overriding Mode Styles - Platform Styles - Ionic Documentation

所以像这样：

.ios ion-badge {
  text-transform: uppercase;
}

将使用 mode="ios" 设置重新设置所有样式，这在 ios 设备上默认完成，但可以手动设置为其他值，因此仅在适合您的项目时使用它.

如何区分 Iphone x media query 和 Iphone 6,7,8 plus？

How to differentiate Iphone x media query to Iphone 6,7,8 plus?

media-queries

ionic4

平台模式