Problème avec un font size récalcitrant!

Hello!

En ce beau samedi de décembre ensoleillé, voici un petit problème que je n'arrive pas à démêler!

J'ai une page avec une barre de navigation, dans laquelle j'ai deux éléments div à chaque extrémité, un à gauche et un à droite, comme ceci:

<nav class="navbar">
   <div id="menu--trigger" class="menu--trigger"><i class="fa fa-bars"></i></div>
   <div id="menu--triggerinfos" class="menu--triggerinfos"><i class="fa fa-plus"></i></div>
</nav>

L'affichage est géré en CSS, et s'affiche comme je le souhaite sur la version classique du site, sur ordinateur portable ou fixe.

Le problème réside au niveau de l'affichage sur mobile device (je teste sur mon iPhone 6 et mon iPad mini 2 (j'entends déjà des médisances!)).

J'ai géré l'affichage avec des média query, et je me retrouve avec un résultat comme ceci (l'icône de gauche, bien que de la même taille dans le CSS est beaucoup plus petite que celle de droite...).
PS: Je l'ai mis en rouge pour le mettre en évidence!

http://antoine-bernard.com/TEST012/



Au niveau du CSS, j'en suis à

.navbar {
    width: 100%;
    height: 50px;
    padding: 0 32px;
}
 
.navbar .menu--trigger {
    display: inline;
    float: left;
    left: 3%;
    height: inherit;
    cursor: pointer;
/*  font-size: 1.8rem; */
    font-size: x-large;
    font-weight: 600;
    top: 3%;
    position: fixed;
}
 
/* iPhone 6 paysage */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
     
.navbar .menu--trigger {font-size: 6rem; color: red;}
.menu ul{width: 80%; margin: auto;}
.menu ul li a{font-size: xx-large;color: yellow;}
}
 
 
.navbar .menu--triggerinfos {
    display: inline;
    float: right;
    right: 3%;
    height: inherit;
    cursor: pointer;
    font-size: x-large;
    font-weight: 600;
    top: 3%;
    position: fixed;
}
 
/* iPhone 6 paysage */
@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)
and (orientation : landscape) {
 
.navbar .menu--triggerinfos { font-size: 6rem; }
.menuinfos .informations{width: 80%; margin: auto;}
.menuinfos .informations h1{font-size: 4.5rem;}
.menuinfos .informations p{font-size: 3rem;line-height: 70px;}
}

Je n'ai mis que ce que j'imagine important pour ce problème, ainsi que les deux media query pour le mode Paysage, car le soucis se rencontre uniquement en paysage.

Merci mille fois d'avance pour votre aide! En espérant que quelqu'un trouve car là je commence à ne plus avoir de cheveux!

Antoine
Modifié par itoine59 (05 Dec 2015 - 17:40)

A mon avis
1- pas besoin d avoir un périphérique mobile pour tester et le navigateur chrome dans sa nouvelle version à une nouvelle interface ( device toolbar) qui propose toujours des modèles préconfigurés( iphone ipad samsung ) . dans chrome , sur la page web faire clic droit inspecter pour ouvrir automatiquement la fenêtre de debug ainsi qu'au niveau de la page principale un onglet ( device tool bar avec mode full et responsive ... à étudier.... ) .
2- le code est inutile car chaque cas est spécifique seul le page active accessible est utile ! pour utiliser le mode debug des navigateurs !!



chrome mode iphone 6 plus OK
chrome mode iphone 6 ........BAD 414x736
chrome mode iphone 4 ........OK mais icones chevauchent l image
chrome mode ipad ...............BAD et icones devant l image

la croix fa-plus et icon fa-bars
Le code css est le même dont problème du a selecteur parent ou mediaquery actif . L'étude du box montre un content height différent font-size:16px et 63 px !!
différence de css properties active entre .navbar .menu--triggerinfos et .navbar .menu--trigger

d' autre propriétés css changent , avous de voir quel sélecteurs s appliquent !
( je vais étudier ca ...ce soir si j'ai du temps ) . Bizarre les navigateurs ne montrent pas dans le cas ou pas de spécificité de propriété comment la valeur est calculée ( pas de sous éléments) !!
un 7rem dans .navbar .menu--trigger infos s applique et pas dans l autre cas
car les 2 menu parents diffèrent par leur MQ ( existe , n existe pas ) !!
@media only screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 1024px) and (min-device-width: 768px) and (orientation: landscape)
.navbar .menu--triggerinfos {
font-size: 7rem;
right: 3%;
}


Modifié par 75lionel (09 Dec 2015 - 12:09)