CSS 所有 iPhone 14（Pro、Max、Plus、Mini）和旧款iPhone 的媒体查询

在本文中，我们将介绍如何在CSS中使用媒体查询来适应 iPhone 14 系列（包括Pro、Max、Plus和Mini）以及旧款iPhone。媒体查询是CSS中的一种技术，可以根据设备的屏幕宽度、高度、像素密度等参数来应用不同的样式。

阅读更多：CSS 教程

iPhone 14 系列媒体查询

iPhone 14 Pro

如果您想针对 iPhone 14 Pro 应用特定的样式，您可以使用以下媒体查询：

@media only screen
  and (device-width: 428px)
  and (device-height: 926px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {
  /* 在此添加你的样式 */
}

iPhone 14 Max

如果您想针对 iPhone 14 Max 应用特定的样式，您可以使用以下媒体查询：

@media only screen
  and (device-width: 428px)
  and (device-height: 926px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {
  /* 在此添加你的样式 */
}

iPhone 14 Plus

如果您想针对 iPhone 14 Plus 应用特定的样式，您可以使用以下媒体查询：

@media only screen
  and (device-width: 414px)
  and (device-height: 896px)
  and (-webkit-device-pixel-ratio: 2)
  and (orientation: portrait) {
  /* 在此添加你的样式 */
}

iPhone 14 Mini

如果您想针对 iPhone 14 Mini 应用特定的样式，您可以使用以下媒体查询：

@media only screen
  and (device-width: 375px)
  and (device-height: 812px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {
  /* 在此添加你的样式 */
}

旧款iPhone媒体查询

除了适配 iPhone 14 系列外，还应该考虑旧款iPhone的适配。以下是一些常见的旧款iPhone的媒体查询示例：

iPhone X、XS

@media only screen
  and (device-width: 375px)
  and (device-height: 812px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {
  /* 在此添加你的样式 */
}

iPhone XR

@media only screen
  and (device-width: 414px)
  and (device-height: 896px)
  and (-webkit-device-pixel-ratio: 2)
  and (orientation: portrait) {
  /* 在此添加你的样式 */
}

iPhone XS Max

@media only screen
  and (device-width: 414px)
  and (device-height: 896px)
  and (-webkit-device-pixel-ratio: 3)
  and (orientation: portrait) {
  /* 在此添加你的样式 */
}

iPhone 8 Plus

@media only screen
  and (device-width: 414px)
  and (device-height: 736px)
  and (-webkit-device-pixel-ratio: 2)
  and (orientation: portrait) {
  /* 在此添加你的样式 */
}