CSS3 - @media 判断iphone / ipad 机型

最新推荐文章于 2022-02-10 14:36:20 发布

Terry_wn

最新推荐文章于 2022-02-10 14:36:20 发布

阅读量2k

点赞数

文章标签： media 机型

本文介绍了如何使用CSS媒体查询来针对不同的iOS设备（包括iPhone和iPad）进行样式适配。详细列举了从iPhone 4到iPhone X以及iPad的各种屏幕尺寸和像素比例，帮助开发者实现响应式设计。

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

兼容iphone4/4s：

 @media (device-height:480px) and (-webkit-min-device-pixel-ratio:2){
 /* style */
}

兼容iphone5 ：

 @media (device-height:568px) and (-webkit-min-device-pixel-ratio:2){
 /* style */
}

兼容iphone6，iphone7，iphone8s ：

 @media (device-height:667px) and (-webkit-min-device-pixel-ratio:2){
 /* style */
}

兼容iphone6 Plus,iphone7 Plus,iphone8 Plus：

 @media (device-height:736px) and (-webkit-min-device-pixel-ratio:2){
 /* style */
}

兼容iphoneX：

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

ps:
写在这些媒体查询内的css，在微信开发者工具上调试看不到效果，
需在手机上测试。

兼容ipad ：

@media only screen  and (min-device-width : 768px)  
                    and (max-device-width : 1024px){  
/* style */  
}

兼容ipad横屏：

@media only screen  and (min-device-width : 768px)  
                    and (max-device-width : 1024px)  
                    and (orientation : landscape){  
/* style */  
}

兼容ipad竖屏：

@media only screen  and (min-device-width : 768px)  
                    and (max-device-width : 1024px)  
                    and (orientation : portrait){  
/* style */  
}