如何区分 Iphone x media query 和 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) { 

}

您可以在以下位置获得更多设备：

• 标准设备的媒体查询 | CSS 技巧

平台模式

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

• 覆盖模式样式 - 平台样式 - Ionic 文档

所以像：

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

将使用mode="ios"set 重新设置所有内容，这是在 ios 设备上默认完成的，尽管它可以手动设置为其他值，因此只有在适合您的项目时才使用它。