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) {
}
