1485 sujets

Web Mobile et responsive web design

Bug iPad : mode paysage affiché en mode portrait

Bonjour,

J'ai créé un site qui a les particularités suivantes :

– chaque page contient un fond d'écran "full background" redimensionné automatiquement (en hauteur et en largeur)
– pas de scroll de la fenêtre (il y a un bloc article qui scrolle à l'intérieur)

En consultant ce site avec un iPad je me suis rendu compte que ce site ne s'affichait pas correctement : en mode portrait c'est ok, mais en mode paysage c'est affiché en mode portrait (çad que la fenêtre scrolle, puisqu'elle a la hauteur du mode portrait, et la partie droite est "vide" car la largeur de la fenêtre correspond à celle du mode portrait).

Voici l'essentiel du HTML (j'indique le Javascript, qui permet de modifier la barre de défilement de la box, mais je ne pense pas que le problème vient de là) :


<body id="index">
<div id="container">
	<header>
		<h1>Titre></h1>
	</header>

		<!-- Main Navigation Menu -->
	<nav>
		Menu avec des ul et li
	</nav>
	<aside>
		<div id="newsletter">
		</div>		
		<div id="social">
		</div>
	</aside>

		<!-- Page Title, Page Content -->
	<h1>Actualité</h1>
		<article>
			<div id="mycustomscroll" class="flexcroll">
				<div class="left-col">
					<p>
					Blablablablablabla Lorem ipsum scratch aux knacss
					<p>
				</div>
			</div>
		</article>

		<!-- Footer -->
	<footer>
	1 km à pied, ça use, ça use…
	</footer>
</div>
	

	<script type="text/javascript">

	if (window.matchMedia("(min-width: 640px)", "(min-height: 480px)").matches) {
		
  var script1 = document.createElement('script');
  script1.type='text/javascript';
  script1.src = 'js/flexcroll.js';
  // Insertion dans le DOM de la balise script initiale
  document.getElementsByTagName('head')[0].appendChild(script1);
}
	
	</script>

</body>


Et voici l'essentiel du css :

/* ----------------------------- */
/* ==container */
/* ----------------------------- */

#container {
	position:relative; /* needed for footer positioning*/
	height:auto !important;
	min-height:100%;
}


#index{
	background:url('../img/index.jpg') center top no-repeat;
	background-size:100% auto;
	background-size:cover;
}

/* ----------------------------- */
/* ==aside */
/* ----------------------------- */

#newsletter {
	position:absolute;
	top:150px;
	width:130px;
}

#social {
	position:absolute;
	top:320px;
	width:110px;
}

/* ----------------------------- */
/* ==article */
/* ----------------------------- */

h1, .h1-like {
	display: block;
	position:absolute;
	top:20%;
	right: 5%;
}


article {
	position:absolute;
	width:540px;
	height:60%;
	top:20%;
	right: 5%;
	margin-top:56px;
	overflow:auto;
}

#index article {
	max-height:330px;
}


/* ----------------------------- */
/* ==footer */
/* ----------------------------- */

footer {
	position:absolute;
	bottom:10px;
	width:100%;
	text-align:center;	
}


Si vous pouviez me donner la solution pour régler ce problème, ou me donner des pistes pour la trouver, ça serait génial.

Merci beaucoup !

etnetn
Bonjour,

Le problème doit venir de votre viewport.
<meta name="viewport" content="width=device-width, height=device-height">
<meta name="viewport" content="initial-scale=1.0">

Ces 2 instructions créent un bug sur iOS.

Raphaël l'explique très bien sur son blog: "De manière générale, sur la plupart des terminaux testés, la valeur de device-width change et s’adapte à l’orientation.
Apple fait une exception à la règle : la valeur de device-width demeure constante en portrait et en paysage sur tous ses navigateurs (sauf sur Opera mini)."

http://blog.goetter.fr/post/35201503825/device-width-et-orientation-sur-mobiles
http://blog.goetter.fr/post/32513655620/viewport-adieu-width-device-width
Sujet clos
Aller à