iPhone 媒体查询 CSS

简介

iOS 设备的屏幕尺寸和分辨率各不相同，为了让网页在 iPhone 上获得更好的体验，需要使用媒体查询来动态地适应不同的屏幕尺寸和分辨率。

媒体查询语法

@media only screen and (max-width: 375px) { 
  /* styles */
}

其中，max-width 表示最大宽度，在此示例中为 375px。这意味着当屏幕宽度小于等于 375px 时，将应用 styles 内的 CSS 样式。

iPhone 媒体查询示例

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

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

/* iPhone 6/7/8 */
@media only screen 
  and (min-device-width: 375px) 
  and (max-device-height: 667px) 
  and (-webkit-device-pixel-ratio: 2) { 
  /* styles */
}

/* iPhone SE */
@media only screen 
  and (min-device-width: 320px) 
  and (max-device-height: 568px) 
  and (-webkit-device-pixel-ratio: 2) { 
  /* styles */
}

总结

使用 iPhone 媒体查询，可以为不同的 iPhone 屏幕尺寸和分辨率提供优化后的 CSS 样式，从而提高网页在手机浏览器中的用户体验。