## Comment résoudre les problèmes de taille Iframe sur iOS à l'aide de CSS ?

Résoudre les écarts de taille des iframes sur iOS à l'aide de CSS

Dans le domaine du développement Web, il est essentiel de garantir que les éléments du site Web, tels que les iframes, se comporter de manière cohérente sur différents navigateurs et appareils. Cependant, il arrive parfois que des plates-formes spécifiques présentent des comportements de rendu inattendus.

Un bon exemple est le problème du dimensionnement des iframes sur iOS. Lorsqu'une iframe contient plus de contenu que ne peut contenir son cadre désigné, elle déborde généralement en conséquence sur les navigateurs autres qu'iOS. Cependant, sur iOS, Safari a tendance à redimensionner le cadre pour s'adapter au contenu, s'écartant ainsi de la conception prévue.

Ce problème peut être corrigé en introduisant un div wrapper et en lui appliquant des propriétés CSS spécifiques. Plus précisément :

<code class="css">.wrapper {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}</code>

L'intégration de ce div wrapper autour de l'iframe permet une gestion appropriée des débordements de contenu, même sur les appareils iOS.

Cette solution tire ses origines d'observations et de rapports précédents sur Stack Overflow. Notamment, le bug a été reconnu depuis iOS 4, avec des informations supplémentaires disponibles dans des ressources telles que :

• https://stackoverflow.com/a/6721310/1047398
• iframe sur Problème de recadrage de contenu iOS (iPad)

En implémentant ces propriétés CSS et un div wrapper, les développeurs peuvent garantir que le dimensionnement de l'iframe se comporte comme prévu dans les différentes versions d'iOS.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!