Certain mobiles ne semblent pas prendre en compte CSS spéciale

Bonjour,

Je dois me lancer dans une intégration responsive.
Après plusieurs lecture sur les forum et articles, j'ai utilisé les méta viewport :

<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">

et de la CSS comme par exemple :

@media (max-width: 500px) {

body {
padding: 0px 10px;
font-size: 50%;
}

#header span.ccml {
    display: none;
}
	
}

Sur I-phone pas de soucis, toute ma CSS est bien prise en compte, mais sur Android (Galaxy note), ce n'est pas du tout pris en compte.

Je n'arrive pas à savoir où chercher....
Si quelqu'un a une idée...Merci par avance

Il me semble que pour le Galaxy Note la largeur est supérieur à 500px. Ce qui pourrai expliquer pourquoi ton css ne s'applique pas sur ton Galaxy Note.

Effectivement j'ai trouvé ça : http://cssmediaqueries.com/target/
J'aurais voulu que la CSS ne s'applique que sur mobile et pas sur écran d’ordinateur (avec fenêtre de navigation en petite résolution).

J'ai essayé ça :

<link media="handheld" href="{% static 'css/mobile.css' %}" type="text/css" rel="stylesheet" />

Mais le Galaxy Note ne prend toujours pas en charge la css mobile.css

il me semble que le device-width du galaxy note en mode portrait est de 360 px, donc çà devrait fonctionner. à mon avis ton problème vient du navigateur utilisé :
avec certains navigateurs la valeur device-width est complètement farfelue. pour exemple j'avais testé un mobile samsung dont la valeur device-width en mode portrait est normalement de 360 px, et bien avec chrome çà donnait bien 360 px, mais avec le navigateur natif de samsung çà donnait 1080 px, alors que 1080 px était normalement la valeur de width, et pas de device-width.
donc pour ton soucis essaye avec différents navigateurs.
Modifié par alex76 (26 Aug 2014 - 19:31)