Responsive

/*----------- iphone 3 -----------*/
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 1) { }

/*----------- iphone 4 -----------*/
@media only screen and (min-device-width: 320px) and (max-device-height: 480px) and (-webkit-device-pixel-ratio: 2) { }

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

/*----------- iphone 6, 6s, 7, 8 -----------*/
@media only screen and (min-device-width: 375px) and (max-device-height: 667px) and (-webkit-device-pixel-ratio: 2) { }

/*----------- iphone 6+, 6s+, 7+, 8+ -----------*/
@media only screen and (min-device-width: 414px) and (max-device-height: 736px) and (-webkit-device-pixel-ratio: 3) { }

/*----------- iphone X , XS, 11 Pro -----------*/
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) { }

/*----------- iphone XR, 11 -----------*/
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) { }

/*----------- iphone XS Max, 11 Pro Max -----------*/
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) { }

/* ----------- iPad Pro ----------- */
/* Landscape*/
@media only screen
and (min-device-width: 1024px)
and (max-device-height: 768px)
and (-webkit-min-device-pixel-ratio: 2){  }

/* Portrait*/
@media only screen 
and (min-device-width: 768px) 
and (max-device-height: 1024px) 
and (-webkit-min-device-pixel-ratio: 2) {   }


/* --------- Galaxy S9 ------------*/
@media only screen and (max-width: 360px){

}

/* ----------- Non-Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 1) { 
}

/* ----------- Retina Screens ----------- */
@media screen 
  and (min-device-width: 1200px) 
  and (max-device-width: 1600px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (min-resolution: 192dpi) { 
}

******************************************************* TEST CODE *************************************************       
/*ipad pro 9.7 landscape*/
@media only screen and (min-device-width: 1366px) and (max-device-height: 1024px) and (-webkit-min-device-pixel-ratio: 2){  
    selector{
        background-color:blue;
    }
}

/*ipad pro 9.7 portrait*/
@media only screen and (min-device-width: 1024px) and (max-device-height: 1366p) and (-webkit-min-device-pixel-ratio: 2) {
    selector{
        background-color:red;
    }
}

/* ipad Mini 7.9 Portrait */
@media only screen and (width:768px){
    selector{
        background-color:yellow;
    }
}
/* ipad Mini  Landscape 7.9 */
@media only screen and (width:1024px){
    selector{
       background-color:orange;
}
}

Last updated