Développement iOS
  1. Développement iOS
  3. Comment définir la window sur un site mobile non réactif?
Intereting Posts
Bootstrap 3.0.3 glyphicons affichant des émoticons sur iOS 7 détecter les modifications apscopes au contenu de la vue de défilement de UIWebView Questions de streaming radio iOS en ligne Arrêtez iOS 7 MKMapView de memory leaks Rendre UILabel cliquable en utilisant Swift UIGestureRecognizer bloque la sous-vue pour gérer les events tactiles iPhone – Dessine un rectangle transparent sur UIView pour révéler une vue sous Pourquoi le son du système ios ne joue-t-il pas en simulateur? Obtenir les propriétés de Kontakt iBeacon defaultCalendarForNewEvents a échoué Faire un UIImage à partir d'un MKMapView Afficher le champ de text UIPickerView est sélectionné, puis masquer après sélection UIActivityViewController dans une vue de conteneur Le message UILocalNotification ne s'affiche pas après 10 minutes en arrière-plan Ancrer un UIButton en bas de la vue d'UITableViewController

Comment définir la window sur un site mobile non réactif?

Je suis un site Web non-réactif et ayant des problèmes dans les vues mobiles. Je n'ai pas de jeu de windows. Je suppose que le contenu devrait apparaître le même sur le mobile que sur le bureau uniquement en zoom arrière.

Voici un visuel de mon problème:

Le contenu déborde du cadre du navigateur

Explication:

Lors de la visualisation sur le bureau, c'est bien. Sur l'iPhone (mobile), la largeur de l'en-tête, du nav et du pied de page diminue (voir l'image) et le contenu principal s'étend essentiellement au-delà de la vue du téléphone (ou de la window ou autre) …

Merci!

Si votre site ne répond pas, cela vous aidera à définir une window d'affichage. Ouvrez le site dans votre browser Web et trouvez la largeur minimale qui empêche votre design de se casser. Ensuite, utilisez la méta-balise suivante dans votre en-tête, en remplaçant la width par la largeur minimale que vous souhaitez afficher sur votre site. 

 <meta name="viewport" content="width=1024">

La balise meta viewport indique au browser qu'il doit rendre la page Web à une largeur différente de celle par défaut. Par exemple, la taille de la window d'affichage par défaut pour Safari iOS est de 980px , ce qui signifie que pour les pages Web sans balise meta viewport, le corps aura une largeur de 980px. En spécifiant une balise meta viewport avec une largeur de 1024, le corps sera rendu à 1024px de large à la place.

Pour illustrer, voici un exemple de site qui a une div principale avec une largeur de 590px, comment il rend à la taille par défaut 980x, et comment il rend quand une largeur de viewport personnalisé de 590px est spécifié en utilisant la balise meta viewport:

Viewport Width sur iOS

Détails sur la balise meta de viewport:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag