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

最新推荐文章于 2023-05-04 21:39:47 发布

原创

最新推荐文章于 2023-05-04 21:39:47 发布 · 1.6k 阅读

2 ·

CC 4.0 BY-SA版权

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

/*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) {
   
   <