Problèmes de site Web CSS sur iPad

Question

Une chose très étrange se passe sur le navigateur safari iPad2.

La page suivante (page d'accueil) coupe le lien de navigation le plus à droite. Il devrait dire "Demander un devis", mais coupe à "Requ".

De plus, la page ne se redimensionne pas automatiquement pour s'adapter correctement à l'écran de l'iPad.

URL du site: www.skiplan.co.uk

J'ai essayé d'utiliser la fenêtre balise meta, mais ça fait qu'empirer les choses.

Des idées? Je ne vois tout simplement pas de problèmes dans firebug.

Note: les émulateurs merdiques en ligne iPad le montrent bien - ça se passe sur le réel/physique iPad2

Answer 1

Les actes de viewport de l'iPad comme si elle est 960px de large, de sorte que votre site est plus grand que son écran. La méta-balise viewport est nécessaire pour la mettre à l'échelle correctement, même si vous devrez peut-être jouer pour bien faire les choses.

L'autre alternative consiste à utiliser des requêtes média pour concevoir une version plus petite pour les écrans plus petits.

Mon conseil serait de toujours avoir une version 960px - 1020px n'est pas une largeur populaire pour une raison!

Answer 2

Vous utilisez très probablement des styles CSS comme des pourcentages, qui cassent votre conception plus tard sur l'iPad en s'adaptant au conteneur de taille d'affichage (dimensions maximales).

Le plus souvent, je vois cela lorsque les gens définissent une boîte/un conteneur dans px mais font/etc dans %' or em`.