Richten Sie feste Elemente auf Mobilgeräte aus?

Feste Elemente sind perfekt auf dem Desktop ausgerichtet (bottom und right sind auf das Browserfenster ausgerichtet). Auf mobilen Geräten sind die Elemente jedoch an die Containergröße angepasst.Richten Sie feste Elemente auf Mobilgeräte aus?

Dies ist, wie es auf mobilen (die schwarze Linie den Bildschirm darstellen) aussehen:

Dies ist, wie ich es auf Handy (die schwarze Linie stellen den Bildschirm) aussehen soll:

Beispiel-Code (In meiner realen Leben Anwendung muß die Leinwand als Ansichtsfenster größer sein (daher die 150vh und 150vw Größe der Leinwand)):

html

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

<body> 
    <div class="container"> 
    <div class="fixedElement">I AM A FIXED ELEMENT</div> 
    <div class="fixedElement2">I AM A FIXED ELEMENT 2</div> 
    </div> 
</body>

css

body { 
    margin: 0; 
} 

.container { 
    width: 150vw; 
    height: 150vh; 
    background-color: orange; 
} 

.fixedElement { 
    position: fixed; 
    top: 50px; 
    right: 200px; 
} 

.fixedElement2 { 
    position: fixed; 
    bottom: 50px; 
    left: 200px; 
}

Codepen example

Vorschläge, wie dieses Problem beheben?

Quelle

2016-04-15 allegutta

standardmäßig position: fixed ist relativ zum Ansichtsfenster, das Sie css entsprechend Ihrem Bildschirm anpassen müssen, sonst müssen Sie die Position ändern: auf absolute Form festgelegt. –

Sie sollten nicht Benutzer-skalierbar = "Nein" verwenden. Sie verursachen mit dieser Einstellung Probleme mit der Barrierefreiheit. –

versuchen

.container { 
    width: 100vw; 
    height: 100vh; 
}

oder

html,body,.container{ 
    height:100%; 
    width:100%; 
}

Quelle

2016-04-15 11:20:42

Ich war nicht klar genug in meiner Frage. Ich habe es jetzt aktualisiert. Ein Teil des Problems besteht darin, dass die Leinwand größer als das Ansichtsfenster sein muss. Ich brauche einige Elemente, um fixiert zu bleiben (das .fixedElement1 und .fixedElement2), während der "Hintergrund" (.container) scrollbar ist. – allegutta

@allegutta was ist, wenn, wenn Sie folgenden css ersetzen.fixedElement { Position: fixiert; oben: 50px; rechts: calc (200px + 50vw); } .fixedElement2 { Position: fest; unten: calc (50px + 50vh); links: 200px; } –

einfach die folgende Regel an die CSS des Körpers hinzu:

body { 
    width: 100vw; 
}

ich ein codepen Beispiel geschaffen, die für mich gearbeitet: Example on Codepen

Ich hoffe, dass du das gesucht hast.

Quelle

2016-04-15 11:22:11 Philipp

Danke für die Antwort, aber es hat es nicht gelöst (versuchen Sie, das Codepen Beispiel auf Ihrem Handy zu öffnen) – allegutta

Ich tat und mit Ihrem Codepen es hat nicht funktioniert, aber mit mir war es in Ordnung. Welches Handy benutzt du? Und hast du das Vollbild-Beispiel geöffnet? – Philipp

Hmmm, ich habe es im Vollbild auf einem iPhone 5S versucht, ohne Glück. Die Elemente scrollen mit dem Container. – allegutta

Sie mischen dort (vw und px).

Die Einheit vw ist relativ zur Breite des Ansichtsfensters. Wenn Sie diesen Wert auf 150vw setzen, wird Ihr "Canvas" (der div-Container mit der Klasse container) 150% breit. Es erweitert den Körper oder das Ansichtsfenster um 50% nach rechts.

Setzen Sie Ihre festen Elemente Positionswerte auf eine feste Einheit right: 200px funktioniert möglicherweise in einigen Ansichtsfenstern, aber nicht genug. Je breiter das Ansichtsfenster ist, desto breiter ist Ihr Container (150vw), aber die 200px sind immer gleich.

Quelle

2016-04-15 11:47:38

Danke. Wie hättest du das CSS für dieses Layout geschrieben (um auf Desktop und Mobile zu arbeiten)? – allegutta

Es gibt zwei mögliche Lösungen: Sie beenden die Leinwand zu 150% des Ansichtsfensters zu erweitern, wie einige Kommentatoren hier bereits vorgeschlagen und gehen mit einer Breite von '100vw' oder' 100% 'oder wenn Sie Nizza (r) CSS schreiben wollten gehen Sie einfach ohne eine Breite Wert für den div-Container mit der Klasse "Container" an erster Stelle. Dann können Sie Ihre festen Elemente relativ dazu positionieren. OR: Sie setzen die Position auch relativ in 'vw', wo der Wert etwas über' rechts: 50vw' für die eine und über 'links: 50vw' für die andere sein sollte. –

Ich sehe, dass ich in meiner Frage nicht klar genug war. Ein Teil des Problems besteht darin, dass die Leinwand größer als das Ansichtsfenster sein muss. Ich brauche einige Elemente, um fest zu bleiben (das '.fixedElement1' und' .fixedElement2'), während der "Hintergrund" ('.container') scrollbar ist. Wenn du weißt, was ich meine? – allegutta

Richten Sie feste Elemente auf Mobilgeräte aus?

Antwort

Verwandte Themen