Bonjour,
Voici ma situation : je viens créer une page dont la largeur par défaut est de 1060px, mais qui doit passer à une largeur de 100% sur les écrans de téléphone.
Pour cela, j'ai ajouté à ma page la meta viewport suivante :
Voici mon code html simplifié :
Et voici mon css simplifié :
Et voici donc mon problème : en faisant ça, tout fonctionne très bien sur iPhone, mais ça ne fonctionne plus sur iPad : la largeur du site est alors bloquée à 768px (le reste de la largeur de ma page n'apparaît pas), la page ne s'adapte pas à l'écran de l'iPad. Si j'enlève la meta viewport, ça fonctionne sur iPad, mais le responsive ne fonctionne plus sur l'iPhone.
Avez-vous une solution qui me permettrait d'avoir un site adaptée au mobile sur les écrans de téléphone tout en ayant un site "classique" sur iPad (mais adapté à la taille de l'écran) ?
Merci d'avance !
Voici ma situation : je viens créer une page dont la largeur par défaut est de 1060px, mais qui doit passer à une largeur de 100% sur les écrans de téléphone.
Pour cela, j'ai ajouté à ma page la meta viewport suivante :
<meta name="viewport" content="width=device-width, initial-scale=1"> Voici mon code html simplifié :
<body>
<div class="content">
<div class="inner clearfix">
Mon contenu
</div>
</div>
</body>
Et voici mon css simplifié :
.inner{width:1060px;}
@media screen and (max-width:640px){
.inner{width:100%;}
}
Et voici donc mon problème : en faisant ça, tout fonctionne très bien sur iPhone, mais ça ne fonctionne plus sur iPad : la largeur du site est alors bloquée à 768px (le reste de la largeur de ma page n'apparaît pas), la page ne s'adapte pas à l'écran de l'iPad. Si j'enlève la meta viewport, ça fonctionne sur iPad, mais le responsive ne fonctionne plus sur l'iPhone.
Avez-vous une solution qui me permettrait d'avoir un site adaptée au mobile sur les écrans de téléphone tout en ayant un site "classique" sur iPad (mais adapté à la taille de l'écran) ?
Merci d'avance !