@media媒体查询判断iPhone各版本

cdgogo

于 2020-02-29 13:36:08 发布

阅读量1.6k

点赞数

分类专栏： CSS

本文链接：https://blog.youkuaiyun.com/qq_36699230/article/details/104573107

版权

本文详细介绍了如何利用CSS的@media媒体查询来针对不同版本的iPhone进行页面布局和样式调整，确保在iPhone各型号设备上都能获得良好的显示效果。

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

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

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

 /* iPhone6/7/8 Plus*/
 @media only screen 
 and (device-width : 414px) 
 and (device-height : 736px) 
 and (-webkit-device-pixel-ratio : 3) {
   <

最低0.47元/天解锁文章