it-swarm.com.de

Die responsive Site wird vergrößert, wenn Sie zwischen Porträt und Landschaft auf dem iPad/iPhone wechseln

Ich habe hier eine responsive Site mit Twitter Bootstrap erstellt: http://zarin.me/cce/

Das responsive Design funktioniert auf iPad und iPhone hervorragend. Wenn ich das Gerät jedoch vom Hochformat in das Querformat verwende, wird die Seite vergrößert, anstatt sich an den Bildschirm anzupassen (das Kneifen des Bildschirms funktioniert). 

Was vermisse ich? Ist dies ein Viewport-Problem? Hier ist der einzige Viewport-Code, den ich in meinem habe:

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

Danke im Voraus!

45
zarinf

Sie möchten auch die maximale Skala hinzufügen

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

UPDATED Ich stimme einigen Kommentaren zu, die Deklaration sollte die Skalierung durch den Benutzer nicht einschränken, da dies eine schlechte Praxis ist. Das Folgende ist ein besserer Ansatz, und ich glaube, dass der Zoom-Fehler längst von Apple behoben wurde.

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

Wenn Sie die maximale Skalierung auf "1" setzen, können Sie Ihre Benutzer daran hindern, alles auf Ihrer Website zu vergrößern. Nicht ideal für die Benutzererfahrung. Versuchen Sie stattdessen dieses Javascript. iOS-Orientierungsänderung

15
minneapolisdan

Setze initial-scale=1.0 in der Meta:

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

Dann setzen Sie -webkit-text-size-adjust:100%; im CSS:

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

Dieser Ansatz hindert einen Benutzer nicht daran, Ihre Website zu vergrößern, stellt jedoch sicher, dass der Text nicht automatisch vom Browser an die Größe angepasst wird.

10
Leigh McCulloch

Ich habe gesehen, wie dies passiert, wenn einer der Container auf der Seite 100% überschreitet. Die Seite wird in der ursprünglichen Ausrichtung in Ordnung angezeigt, aber wenn die Ausrichtung geändert wird, wird die zusätzliche Breite in Kraft gesetzt, wodurch die Seite skaliert wird und normalerweise ein Rand rechts oder links bleibt um sicherzugehen, dass keine nachlaufenden Polsterungen oder Ränder vorhanden sind.

2
user1199529

Hatte genau dieses Problem auf Ipad 3 und IOS 7.1.2

Mit Hilfe der Maximum-Skala = 1 wurde es fixiert und kann gezoomt werden

Die js-Lösung hat nicht funktioniert

1
David Sims

Das Folgende funktioniert für mich und ermöglicht Benutzern das Vergrößern

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

Wenn Sie Probleme mit dem iPhone-X haben, versuchen Sie <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover" />

Das ist Arbeit für mich.

0
Amit Dwivedi