Page trop large dans Edge & Internet Explorer ?

Quand on fait un site à base de pages SVG, parfois on constate que dans les navigateurs Edge ou Internet Explorer (Microsoft), les ascenseurs horizontaux sont trop longs : la page est trop large pour le SVG.

C’est à dire qu’il y a un grand espace blanc à droite de la page.

Ceci arrive quand le SVG principal contient des éléments qui dépassent les bords de la page.

Même si ces éléments ne sont pas visibles, les navigateurs Microsoft laissent de la place pour les accommoder.

Pour régler la situation il suffit d’ajouter à votre CSS :

    svg{
      overflow:hidden;
    }

Comment savoir si le visiteur est sur mobile?

Il est nécessaire d’envoyer un visiteur qui arrive sur un petit écran vers une version adaptée de votre site.

Mais comment savoir si son appareil est un téléphone ou un ordinateur ?

Le moyen que nous utilisons est simple, stable, et nous permet de voir la version “bureau” ou la version “mobile” au choix sur n’importe quel appareil.

Si la fenêtre du visiteur est en format paysage (plus large que haute) nous allons afficher la page en version “bureau”.

Si la fenêtre du visiteur est en format portrait (plus haute que large) nous allons afficher la page en version “mobile”.

<script>

  // point de basculement
  var pb = 0.9;

  var ratio = window.innerWidth / window.innerHeight;

  var l = location.href;
  
  // de bureau à mobile
  if (ratio < pb && !cestMobile(l)) location.href = [version mobile];
		
  // de mobile à bureau
  if (ratio >= pb && cestMobile(l)) location.href = [version bureau];

  function cestMobile(hrf){
    if [déjà mobile] return true;
    else return false;
  }

</script>

Javascript pour re-dessiner la page

Dans l’article précédent nous avons trouvé un moyen d’adapter la page à la taille de la fenêtre.

Le seul problème avec cette technique, c’est que si le visiter modifie sa fenêtre, la page n’est plus à la bonne échelle.

La solution, c’est de re-dessiner la page lorsque le visiteur modifie la fenêtre.

Malheureusement, window.onsresize est déclenché, non seulement quand la fenêtre est modifiée, mais aussi quand elle est zoomée.

Pour redessiner la page quand la fenêtre est modifiée mais éviter de le faire quand la fenêtre est zoomée, on regarde les proportions de la page:

  • onresize avec changement de ratio L/H = re-dessiner la page
  • onresize sans changement de ratio L/H = ne rien faire
  <script>

	var delai = 0.5;
	var already = 0;
	var rat = ratio();

	window.onresize = function(event) {
		var hrf = window.location.href;
		if (hrf.substr(-1) == '+') return false;

		if (ratio() == rat) return false;
		if (!already){
		already = 1;
		setTimeout(redraw, delai * 1000);
		}
	};	

	function redraw(){
		already = 0;
		window.location.reload();
	}

	function ratio(){
		var w = window.innerWidth;
		var h = window.innerHeight;
		var r = Math.round(w/h*10);
		return r;
	}

  </script>

Ce script n’a pas d’intérêt pour les pages destinées aux appareils mobiles, car la fenêtre ne peut changer de format.

Responsive Design, c’est facile

Pourquoi afficher une page à une largeur fixe ? Il faut présumer que le visiteur a une fenêtre qui lui convient.

Et si on affichait la page à la taille de la fenêtre ?

Si on fait une page de référence à 1000 px de large, c’est très facile de faire en sorte que la page remplisse parfaitement n’importe quelle fenêtre.

Il suffit de faire deux choses :

1. Dans la balise <head>, un peu de javascript

<script>
  // 1 rem = 1/100 de la largeur de la fenêtre
  var monRem = window.innerWidth/100;
  document.documentElement.style.fontSize = monRem+'px';
</script>

2. Partout ailleurs on utilise l’unité REM au lieux de PX, et on met 1/10 la quantité voulue :

font: normal 1.0/1.2REM verdana, sans serif;

Voici une exemple d’un page qui a été construite en moins d’une heure en utilisant cette technique. La page s’affiche correctement dans tous les navigateurs, sur toutes les plates-formes.

Il faut savoir que si le visiteur modifie sa fenêtre, la page n’est plus à la bonne échelle.

La solution (expliquée ici) est de redessiner la fenêtre quand le visiteur la modifie.

N.B. On ne peut pas faire en sorte que 1 REM = 1 PX parce qu’Internet Explorer arrondit trop les valeurs. Le calcul ci-dessus donnerait monRem = 1.1321, ce que IE arrondit à 1.13. Ce n’est pas assez précis pour bien aligner les éléments de la page.