radiantassure/Vue/Pharmaciegarde/index.php

<?php $this->titre = "Intersanté - Pharmacies de garde"; 
	
?>
<div class="card shadow-lg border-0 mb-4" style="border-radius: 15px;">
	<div class="card-header bg-primary text-white py-3" style="border-radius: 15px 15px 0 0;">
		<div class="row align-items-center">
			<div class="col-8">
				<h4 id="h4_titre" class="mb-2 text-center">
					<i class="fa-solid fa-book me-2"></i>
					<?= _("Pharmacies de garde") ?>
				</h4>
			</div>
		</div>
	</div>
	<div class="card mb-3">
		<div class="iframe-container">
		  <iframe 
			src="https://www.pharmacies-de-garde.ci/" 
			width="100%" 
			height="500"
			frameborder="0"
			scrolling="yes"
			allowfullscreen
			loading="lazy"
			class="responsive-iframe">
		  </iframe>
		</div>
	</div>
</div>

<style>
.iframe-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid #ddd;
  border-radius: 8px;
}

.responsive-iframe {
  border: none;
}

/* Hauteurs spécifiques par type d'écran */

/* Mobile - Petits écrans (jusqu'à 767px) */
@media (max-width: 767px) {
  .iframe-container {
    height: 500px;
  }
  .responsive-iframe {
    height: 500px;
  }
}

/* Tablettes (768px à 1023px) */
@media (min-width: 768px) and (max-width: 1023px) {
  .iframe-container {
    height: 600px;
  }
  .responsive-iframe {
    height: 600px;
  }
}

/* Desktop - Grands écrans (1024px et plus) */
@media (min-width: 1024px) {
  .iframe-container {
    height: 700px;
  }
  .responsive-iframe {
    height: 700px;
  }
}

/* Très grands écrans (1440px et plus) */
@media (min-width: 1440px) {
  .iframe-container {
    height: 800px;
  }
  .responsive-iframe {
    height: 800px;
  }
}

/* Orientation paysage sur mobile */
@media (max-width: 767px) and (orientation: landscape) {
  .iframe-container {
    height: 400px;
  }
  .responsive-iframe {
    height: 400px;
  }
}

/* Améliorations pour la navigation tactile */
.iframe-container {
  -webkit-overflow-scrolling: touch;
}

/* Indicateur de chargement */
.iframe-container::before {
  content: "Chargement...";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  color: #666;
}
</style>

<script>
// Script pour améliorer l'expérience mobile et ajuster dynamiquement
document.addEventListener('DOMContentLoaded', function() {
  const iframe = document.querySelector('.responsive-iframe');
  const container = document.querySelector('.iframe-container');
  
  // Fonction pour ajuster la hauteur selon la taille de l'écran
  function adjustIframeHeight() {
    const screenWidth = window.innerWidth;
    const screenHeight = window.innerHeight;
    
    // Ajustement dynamique basé sur la taille de l'écran
    if (screenWidth <= 767) {
      // Mobile
      if (screenHeight <= 667) { // iPhone 6/7/8 et similaires
        container.style.height = '450px';
        iframe.style.height = '450px';
      } else {
        container.style.height = '500px';
        iframe.style.height = '500px';
      }
    } else if (screenWidth <= 1023) {
      // Tablettes
      container.style.height = '600px';
      iframe.style.height = '600px';
    } else {
      // Desktop
      container.style.height = '700px';
      iframe.style.height = '700px';
    }
  }
  
  // Ajuster au chargement
  adjustIframeHeight();
  
  // Réajuster lors du redimensionnement
  window.addEventListener('resize', adjustIframeHeight);
  
  // Gestion du zoom sur mobile
  let lastTouchEnd = 0;
  iframe.addEventListener('touchstart', function(event) {
    if (event.touches.length > 1) {
      event.preventDefault();
    }
  });
  
  iframe.addEventListener('touchend', function(event) {
    const now = (new Date()).getTime();
    if (now - lastTouchEnd <= 300) {
      event.preventDefault();
    }
    lastTouchEnd = now;
  }, false);
  
  // Essayer d'ajuster la hauteur au contenu après chargement
  iframe.onload = function() {
    setTimeout(() => {
      adjustIframeHeight();
    }, 1000);
  };
});
</script>