Salut les grand freres du code, avant tout Bonne et Heureuse année!
Je me tourne vers vous car mes quelques heures de Googlisation n'ont rien données...
Voila je rencontre un petit problème avec mon code.
Je suis entrain de faire un exercice HTML/CSS/Js, sans jQuerry.
C'est un petit jeu bidon (coockie cliquer), mais je ne pense pas que sa nature soit déterminente pour mon probleme à pars qu'il faut cliquer plein de fois.
J'avais l'ambition de le rendre responsive, pout tout types de media.
Ca fonctionne nickel sur pc (xubuntu chrome) nickel sur android(chrome) mais pas sur l'iPhone de ma soeure(se ni chrome ni safari), ...
Aussi vu que ca n'est pas mon smartphone, je ne peux pas me permettre de faire 15000 essaie...
Mon probleme:
- on ne peut pas cliquer sur le moindre bouton à cause du zoom auto comme si le viewport ne fonctionnait pas...
Pourtant j'ai vu sur Google que cette ligne deverait tout prendre en compte... :
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
Voici mon CSS
@viewport {
width: device-width; /* largeur du viewport */
zoom: 1; /* zoom initial à 1.0 (et clin d'oeil aux fans d'IE6/7) */
}
...
@media screen and (max-width: 500px)
{
header h1{
font-size: 1.5em;
}
#milieu{
display: none;
}
.section{
width: calc(100% / 2);
}
}
Mon HTML
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Document</title>
</head>
<body>
...
</body>
</html>
Voila, si quelqu'un à une piste, ca serait avec plaisir!
Merci de vous etre penché sur mon probleme.
lGatl
