媒体查询判断ipad与iPhone各版本i

时间：2023-03-08 18:59:44
  1. /* 判断ipad */
  2. @media only screen
  3. and (min-device-width : 768px)
  4. and (max-device-width : 1024px){
  5. /* style */
  6. }


    

  1. /* ipad横屏 */
    2. 

  2. @media only screen
    3. 

  3. and (min-device-width : 768px)
    4. 

  4. and (max-device-width : 1024px)
    5. 

  5. and (orientation : landscape){
    6. 

  6. /* style */
    7. 

  7. }
    8. 





    

  1. /* ipad竖屏 */
    2. 

  2. @media only screen
    3. 

  3. and (min-device-width : 768px)
    4. 

  4. and (max-device-width : 1024px)
    5. 

  5. and (orientation : portrait){
    6. 

  6. /* style */
    7. 

  7. }
    8. 





    

  1. /* 判断iphone5 *//* 横屏竖屏判断方法与ipad一样 */
    2. 

  2. @media only screen
    3. 

  3. and (min-device-width : 320px)
    4. 

  4. and (max-device-width : 568px){
    5. 

  5. /* style */
    6. 

  6. }
    7. 





    

  1. /* 判断iphone4-iphone4s *//* 横屏竖屏判断方法与ipad一样 */
    2. 

  2. @media only screen
    3. 

  3. and (min-device-width : 320px)
    4. 

  4. and (max-device-width : 480px){
    5. 

  5. /* style */
    6. 

  6. }
    7. 





    

  1. /* iphone5分辨率 */
    2. 

  2. screen Width = 320px (css像素)
    3. 

  3. screen Height = 568px (css像素)
    4. 

  4. screen Width = 640px (实际像素)
    5. 

  5. screen Height = 1136px (实际像素)
    6. 

  6. Device-pixel-ratio:2
    7. 





    

  1. /* iphone4-iphone4s分辨率 */
    2. 

  2. screen Width = 320px (css像素)
    3. 

  3. screen Height = 480px (css像素)
    4. 

  4. screen Width = 640px (实际像素)
    5. 

  5. screen Height = 960px (实际像素)
    6. 

  6. Device-pixel-ratio:2
    7.