CSS-Transformation: Architektur nicht auf dem iPad arbeiten

ich eine einfache Website im Aufbau gemacht haben, die ein Bild hat und etwas Text in der Mitte der Seite zentriert wie folgt vor:CSS-Transformation: Architektur nicht auf dem iPad arbeiten

HTML-Code:

<body> 
    <div id="container"> 
     <span id="wip">Under Construction</span> 
     <img id="image" src="katte.jpg"> 
     <span id="text">Glæd dig, her åbner katteboxen.dk i foråret 2015. Vi glæder os til at forkæle din kat med en spændende pakke hver måned.</span> 
    </div> 
</body>

CSS-Code:

body { 
    margin: 0; 
    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; 
    font-weight: 700; 
    text-align: center; 
} 
#container { 
    max-width: 1230px; 
    width: 100%; 
    position: fixed; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
} 
#image { 
    width: 100%; 
} 
#text { 
    font-size: 20px; 
    padding: 0 15px; 
    display: block; 
} 
#wip { 
    font-size: 40px; 
    padding: 0 15px; 
    display: block; 
}

-Link: http://katteboxen.dk/

Alles funktioniert gut, außer wenn es um iPads geht. Der Inhalt wird angezeigt, wenn beispielsweise die CSS-Regel transform: translate(-50%, -50%); nicht für den Container angewendet wurde. Welche Alternativen gibt es, um dieses Problem zu beheben? Jede Beratung oder Rückmeldung ist mehr als willkommen.

Quelle

2014-10-01 MariusNV

Möchten Sie einen Screenshot teilen? :) – Rvervuurt

@Rvervuurt [link] (http://i.imgur.com/yHvcA0n.jpg): D – MariusNV

Himanshu war schneller (ich versuchte es immer noch). Seine Lösung funktioniert. – Rvervuurt

Eigenschaft Transformationsbrowserbasierte Objekt -webkit-Transformation, -moz-Transformation, -o-Transformation .... Ans es so nach dem jeweiligen i-Pad-Browser dieses i es wird das Problem

lösen

oder nur

margin-left:-50%; 

margin-top:-50%;

Quelle

2014-10-01 08:03:06 himanshu

Ich kann bestätigen, dass das funktioniert. http://jsfiddle.net/z2j0hmr5/ (öffnete es auf meinem iPad) Obwohl Sie einige Neupositionierung tun möchten. – Rvervuurt

Sie verwenden könnte für transform-Eigenschaft Browser spezifische Präfixe versuchen müssen, so:

-webkit-transform: translate(-50%, -50%); 
-ms-transform: translate(-50%, -50%); 
transform: translate(-50%, -50%);

den Trick tun sollten.

Zum Vergleich: here

Quelle

2014-10-01 08:12:05 robjez

CSS-Transformation: Architektur nicht auf dem iPad arbeiten

Antwort

Verwandte Themen