Wischfunktion auf ipad verhindern

**MelBe** · 17.03.2013, 13:30

Hallo,

ich habe eine Seite programmiert, wenn ich diese auf dem ipad öffne. Dann kann ich die Seite nach links "rauswischen", nach rechts geht das nicht. Ich möchte die Seite generell nicht rauswischen. Wie kann ich das verhindern. Bin leider noch nicht sehr fit, was die Programmierung von Seiten für mobile Devices angeht.
Danke.

VG

***lucina*** · 17.03.2013, 13:51

Gib uns einen Link, und wir verstehen, was Du mit 'rauswischen' meinen könntest ...

(Für mich klingt das erst einmal danach, als ob Du auf das Setzen eines Viewports für iOS verzichtet hast - siehe http://developer.apple.com/library/i...eViewport.html)

**MelBe** · 17.03.2013, 14:02

Bisher hab ich folgenden Code als individuellen Header-Code eingegben:

Code:

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

Was ich genau meine ist, ich hab ein Layout zentriert mit einer Breite von 955 px. Wenn ich mit dem Finger über die Seite wische dann kann ich diese 955px, die mit Inhalt gefüllt sind, nach links aus dem Browser-Fenster rausziehen und es bleibt nur noch das Hintergrundbild.

http://contao.fr-consilium.de

***lucina*** · 17.03.2013, 14:17

Naja, das der Content zu breit läuft hast Du ja auch in anderen Browsern.

Schneller Fix (ungetestet):

Code:

body{
width:100%;
overflow:hidden;
}

**MelBe** · 17.03.2013, 14:38

Zu breit ist der Content ja nicht. Wird auf dem ipad richtig angezeigt. Der Kunde möchte nur nicht, dass ich diesen mit dem Finger aus dem Browserfenster komplett rausziehn oder wischen kann. Nach rechts geht es ja auch nicht

***lucina*** · 17.03.2013, 14:47

Der <body> ist zu breit, nicht der #container. Was man ja auch schön am horizontalen Scrollbalken erkennen kann ...

**MelBe** · 17.03.2013, 14:52

Ah okay, jetzt versteh ich. Vielen Dank, jetzt scheint es zu funktionieren.

**MelBe** · 17.03.2013, 15:06

Eine Frage hab ich leider noch. Wie kann ich denn direkt im css das ipad ansprechen oder das iphone ich hab es mit

Code:

.ios.mobile

versucht und auch mit

Code:

.ipad

aber ich hab keine Reaktion erhalten.

***lucina*** · 17.03.2013, 15:16

Auf dem iPad Retina bekomme ich als Useragent .ios .other - da wirst Du wohl die Unterscheidung mittels Pixelzahl treffen müssen (siehe beispielsweise unter http://zsprawl.com/iOS/2012/03/css-f...tina-displays/).

Und für die Androids und WindowsMobiles wirst Du das sicher auch noch anpassen wollen.

**MelBe** · 17.03.2013, 15:36

Oh, okay. Kann es sein das mit Contao 3.0 doch einiges anders ist. Meine bisherigen Seiten wurden alle auf dem iphone einfach verkleinert dargestellt, soweit so gut. Diese Seite hab ich mit Contao 3.0 erstellt und auf dem iphone wird überhaupt nichts verkleinert. Ich versteh das nicht, standardmäßig wird eine Seite doch vom iphone verkleinert, solange nichts anderes angegeben wird. Aber bei dieser Seite ist das nicht der Fall. Es ändert sich auch ncihts, wenn ich den Viewport mitangebe oder nicht.