Les media queries

Ayant travaillé recemment sur le responsive, j’ai réalisé combien il etait difficile d’avoir un rendu similaire sur tous les types de mobiles.En codant pour l’iphone 6, généralement ca passe aussi pour les samsung et windows phone, iphone 5 et 4 sont quasi identiques, les Nokia ont des dimensions et donc  des medias queries qui peuvent rentrer en conflit entre elles.bref c’est un peu fastidieux

Voici une liste récupérée sur le net et qui marche réellement sur mobile et tablette

/* ============================================================
  MEDIA QUERIES 
============================================================ */
/*Samsung Galaxy S3*/
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 2)
{
    

}


/*Samsung Galaxy S2*/
@media screen and (device-width: 320px) and (device-height: 534px) and (-webkit-device-pixel-ratio: 1.5)
{
    
}

/*Samsung Galaxy S4*/
@media screen and (device-width: 320px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)
{
    
}


/*Samsung Galaxy S5 + htc one oneplus One*/

@media screen and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3)
{
    
}


/*IPAD 1 & 2 + IPAD MINI*/
@media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 1)
{
    
}
/*IPHONE 6 PORTRAIT*/
@media only screen 
    and (min-device-width : 375px) 
    and (max-device-width : 667px) 
    and (orientation : portrait) 
    and (-webkit-min-device-pixel-ratio : 2)
{
}

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

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

}

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

}


/*IPAD 3 4*/
@media only screen and ( min-device-width: 768px ) and ( max-device-width: 1024px ) and ( orientation: portrait ) and (-webkit-min-device-pixel-ratio: 1) {
}


@media only screen and ( min-device-width: 768px ) and ( max-device-width: 1024px ) and ( orientation: landscape ) and (-webkit-min-device-pixel-ratio: 1) {
}

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.