CSS媒体查询区分iPhone 6、 iPhone8、iPhone8 Plus和iPhoneX

最新推荐文章于 2022-10-27 15:57:29 发布

原创最新推荐文章于 2022-10-27 15:57:29 发布 · 4.9k 阅读

4 ·

CC 4.0 BY-SA版权

CSS 同时被 2 个专栏收录

6 篇文章

订阅专栏

媒体查询

1 篇文章

订阅专栏

本文详细介绍了如何使用CSS媒体查询来针对不同的iPhone设备（包括iPhone6, iPhone8, iPhoneX及其Plus版本）进行精确的样式调整，确保网页在各种屏幕尺寸下都能呈现出最佳的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

/*iPhone6和iPhone8*/
@media only screen 
    and (device-width : 375px) 
    and (device-height : 667px) 
    and (-webkit-device-pixel-ratio : 2) {
/*code*/
 }

/*iPhone6 Plus 和iPhone8 Plus*/
@media only screen 
    and (device-width : 414px) 
    and (device-height : 736px) 
    and (-webkit-device-pixel-ratio : 3) {
    /*code*/
 }

/*iPhoneX*/
@media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) { 
    /*code*/
}