@media iphone 5 and 6 queries

Question

我想應用字體和背景顏色，具體取決於我是否使用iphone 5或6.在查詢中有重疊，所以它總是落入最後一個查詢中。我如何爲iphone 5和6應用CSS？

/*iPhone6 Portrait and Landscape*/ 
@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) { 
     body { 
      background-color: red; 
      font-size:16px; 
     } 
} 

/*iPhone5 Portrait and Landscape*/ 
@media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 568px){ 
     body { 
      background-color: lightblue; 
      font-size:12px; 
     } 
} 

Answer 1

這對於iPhone 5，iPhone 6和iPhone 6+對你有所幫助。

/* ----------- iPhone 5 and 5S ----------- */ 
/* Portrait and Landscape */ 
@media only screen and 
(min-device-width: 320px) and (max-device-width: 568px) and 
(-webkit-min-device-pixel-ratio: 2) { 

} 

/* Portrait */ 
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 568px) 
and (-webkit-min-device-pixel-ratio: 2) 
and (orientation: portrait) { 
} 

/* Landscape */ 
@media only screen 
and (min-device-width: 320px) 
and (max-device-width: 568px) 
and (-webkit-min-device-pixel-ratio: 2) 
and (orientation: landscape) { 

} 

    /* ----------- iPhone 6 ----------- */ 

/* Portrait and Landscape */ 
    @media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2) { 

} 

/* Portrait */ 
@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2) 
and (orientation: portrait) { 

} 

/* Landscape */ 
@media only screen 
and (min-device-width: 375px) 
and (max-device-width: 667px) 
and (-webkit-min-device-pixel-ratio: 2) 
and (orientation: landscape) { 

} 

/* ----------- iPhone 6+ ----------- */ 

/* Portrait and Landscape */ 
@media only screen 
    and (min-device-width: 414px) 
    and (max-device-width: 736px) 
    and (-webkit-min-device-pixel-ratio: 3) { 

} 

/* Portrait */ 
@media only screen 
    and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (-webkit-min-device-pixel-ratio: 3) 
and (orientation: portrait) { 

} 

/* Landscape */ 
@media only screen 
and (min-device-width: 414px) 
and (max-device-width: 736px) 
and (-webkit-min-device-pixel-ratio: 3) 
and (orientation: landscape) { 

} 

來源：CSS-tricks