Blog LBAT

Comment forcer l'affichage correct de son site internet sur Ipad ?


Correction d'un bug d'affichage Ipad
Depuis la mise en place de la version responsive design du CMS Wmaker, nous rencontrions un "léger" bug d'affichage. Cela ne concernant que les versions "Responsive" puisque la version dite "Adaptive" est constituée d'une maquette à part entière pour le mobile et le tient donc pas compte des règles de la version desktop.
Lors du la création de certain site internet, le choix design du client réclamait des sites s'affichant sur des largeurs différentes du standard de 980 pix.

Ainsi certains sites récents ont été imaginé avec des largeurs de 1032 pix ( Les Eaux Saint Georges) , 1200 pix ( le dernier site de l'hôtel Costa Rossa) ou autres tailles encore allant de 960 à 1200 pix de large.
 

Perte de pixel sur Ipad

L'affichage sur Ipad rencontrait alors un vrai défaut. 
De façon très curieuse, les pix supplémentaires au 980 ( 1200 - 980 = 220 pix = beaucoup !) décalaient l'affichage du site depuis la partie droite de l'affichage.
Ce problème existe sur d'autres CMS et pas exclusivement sur Webzine. Les différents messages trouvés sur des forums montrent que d'autres webmaster se sont creusés la tête sur ce défaut d'affichage.

 

La solution sur Ipad

Un petit bout de code tout bête, est hop tout va mieux 

<meta name="viewport" content="width=1200, maximum-scale=1.0" />
Et hop, tout va beaucoup mieux. Le site vient bien s'adapter à 100 % de l'écran de la tablette, format paysage ou panorama sans décaler les fameux pixel de trop.
Il est donc temps de reprendre et vérifier l'ensemble des sites réalisés par La Boite A Truc dont la version responsive est basée sur une solution différentes des 980 pix de base.

Crédit photo : Sorry par Pic Jumbo