码迷,mamicode.com
首页 > 其他好文 > 详细

媒体查询判断ipad和iPhone各版本

时间:2016-04-25 13:24:01      阅读:1869      评论:0      收藏:0      [点我收藏+]

标签:

/* 判断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 */
}

  

/* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px){
/* style */
}

  

/* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px){
/* style */
}

  

/* iphone5分辨率 */
screen Width = 320px (css像素)
screen Height = 568px (css像素)
screen Width = 640px (实际像素)
screen Height = 1136px (实际像素)
Device-pixel-ratio:2

  

/* iphone4-iphone4s分辨率 */
screen Width = 320px (css像素)
screen Height = 480px (css像素)
screen Width = 640px (实际像素)
screen Height = 960px (实际像素)
Device-pixel-ratio:2

  

媒体查询判断ipad和iPhone各版本

标签:

原文地址:http://www.cnblogs.com/tonyTao/p/5430434.html

(1)
(1)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!