如何区分 Iphone x 媒体查询与 Iphone 6、7、8 plus？

Question

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

 /* 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 是最大的设备，但您正在应用宽度为 375 像素以上的规则...这将包括宽度为 414 像素及以上的设备。

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

/* ----------- 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 设备上默认完成，但可以手动设置为其他值，因此请仅在适合您的项目时使用它。