web-dev-qa-db-fra.com

Le site responsive est agrandi lors du basculement entre Portrait et Paysage sur iPad/iPhone

J'ai construit un site responsive en utilisant Twitter Bootstrap ici: http://zarin.me/cce/

Le design responsive fonctionne parfaitement sur iPad et iPhone, mais lorsque je bascule l'appareil de portrait en paysage, le site est agrandi au lieu de s'adapter à l'écran (le pincement fonctionne). 

Qu'est-ce que je rate? Est-ce un problème d'affichage? Voici le seul code de fenêtre d'affichage que j'ai dans mon:

<meta content="width=device-width, initial-scale=1.0" name="viewport">

Merci d'avance!

orientationresponsive-designviewportscreen-orientationdevice-orientation
45
zarinf

Vous souhaitez également ajouter l'échelle maximale

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

UPDATED Je suis d’accord avec certains commentaires, la déclaration ne doit pas limiter la mise à l’échelle par l’utilisateur car c’est une mauvaise pratique. Ce qui suit est une meilleure approche et je pense que le bogue de zoom a été corrigé depuis longtemps par Apple.

<meta name="viewport" content="width=device-width, initial-scale=1">
67
justinavery

Le fait de définir l’échelle maximale sur «1» fonctionne, mais empêche les utilisateurs d’agrandir l’image avec zoom sur votre site. Pas idéal pour l'expérience utilisateur. Essayez plutôt ce Javascript, iOS-Orientation Change Fix

15
minneapolisdan

Définissez initial-scale=1.0 dans la méta:

<meta name="viewport" content="width=device-width,initial-scale=1.0" />

Puis définissez -webkit-text-size-adjust:100%; dans le CSS:

body {
  -webkit-text-size-adjust: 100%;
}

Cette approche n’empêche pas les utilisateurs d’agrandir leur site Web, mais garantit que le texte ne sera pas ajusté automatiquement par le navigateur.

10
Leigh McCulloch

J'ai vu cela se produire lorsqu'un des conteneurs sur la page dépasse 100%. La page s'affiche correctement dans l'orientation initiale, mais lorsque l'orientation est modifiée, la largeur supplémentaire devient en vigueur, ce qui entraîne une mise à l'échelle de la page et laisse généralement une marge à droite ou à gauche . pour vous assurer qu'il n'y a pas de marge de remplissage ou de fin.

2
user1199529

Avait exactement ce problème sur Ipad 3 et IOS 7.1.2

Utilisation de maximum-scale = 1 fixe et permet le zoom

La solution js n'a pas fonctionné

1
David Sims

Ce qui suit fonctionne pour moi et permet aux utilisateurs de zoomer

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
1
jjgrainger

Si vous rencontrez un problème principalement dans iPhone-X, essayez <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />

C'est un travail pour moi.

0
Amit Dwivedi