CSS Smartphoneansicht: Inhalt auf View konzentrieren?

[Dsimon24]

Hallo zusammen,

ich habe eine WebApp erstellt, die derzeit noch lokal bei mir auf einem Testserver läuft.
Diese WebApp soll auf einem Smartphone laufen und dort optimal dargestellt werden.

Auf einem Android-Smartphone wird die erste Seite komplett im View abgebildet.
Auf einem iPhone muss allerdings gescrollt werden, damit alles ersichtlich ist.
Kann man es realisieren, dass der gesamte Inhalt in einem View dargestellt wird,
ohne das man scrollen muss? Ist dies irgendwie möglich bzw. gibt es dazu eine
Funktion oder ähnliches?

VG, David

 

[Knalltuete]

Ich verstehe leider nicht 100%ig was du machen willst (1 Screenshot wäre schön), aber ich denke mit den Einheiten vh und vw sollte dein Problem gelöst werden können, siehe https://www.drweb.de/magazin/neue-css-einheiten-fuer-responsive-designs-47490/

 

[Dsimon24]

Anbei übersende ich euch mal einen Screenshot mit.
Unter dem Text ' Du erhältst innerhalb von 48 Stunden'
steht noch ein bisschen mehr Text und ein Link. Dies alles
möchte ich im View des jeweiligen Smartphones anzeigen,
ohne Scrollen zu müssen.

Ich habe dem Ganzen jetzt in ein DIV mit der ID 'start' gegeben
und über CSS dieser ID dem Wert 'height: 100vh;' gegeben.
Leider funktioniert es jedoch noch nicht.

 

[Ruheliebhaber]

Ich denke, Du musst auch die Schriftarten entsprechend anpassen.

h1 {
  font-size: 10vw;
}

 

[Dsimon24]

Ich denke, Du musst auch die Schriftarten entsprechend anpassen.

h1 {
  font-size: 10vw;
}

Da es bei mir nur p-Tags sind, habe ich es entsprechend wie folgt angepasst:

p {
  font-size: 6vw;
}

[/QUOTE]

10vw waren etwas zu viel.
Aber jetzt habe ich noch immer nicht das Fenster auf 100%.
Bei größeren iPhones geht die Seite nur bis 3/4 des Views.
Mein Ziel ist es, auf jedem EG den View zu 100%
auszunutzen.

 

[Ruheliebhaber]

Was manchmal hilft, ist, das ganze CSS-File zu verwerfen und noch einmal neu anfangen.
Als kleines Testprojekt sollte der Aufwand überschaubar sein.
CSS-Anweisungen können sich gegenseitig aufheben oder überschreiben.
Das ist bei Dir bestimmt auch so.

Vielleicht probierst Du einmal vh statt vw als Einheit?

 

[Knalltuete]

Hab hier mal quick&dirty was gebastelt: https://codepen.io/anon/pen/rYxBbQ
Entspricht das deiner Vorstellung?

 

[Tourgott]

Ich glaube was du suchst ist vmin und vmax.

 

[Dsimon24]

Hab hier mal quick&dirty was gebastelt: https://codepen.io/anon/pen/rYxBbQ
Entspricht das deiner Vorstellung?

Dies hat ganz gut funktioniert. Danke dir!

Jetzt habe ich auf einer weiteren Seite mehrere Section.
Teilweise mit nur einem Button, teilweise mit Text, der
tatsächlich gescrollt werden muss.

Kann ich das mit vh und vw auch realisieren, dass jede
Section in einem View angezeigt wird? So dass ich zwar
scrollen kann, wenn notwendig - ohne zu Scrollen aber
nicht mehrere Section im View sehe?

 

[Ruheliebhaber]

Das halte ich für keine gute Idee bzw. fragwürdig von der Bedienung.

Aber es sollte mit DIV und der Overflow-Eigenschaft gehen.
Jeder Div müsste dann die volle ViewPort-Höhe bekommen.

https://www.w3schools.com/css/css_overflow.asp

Aber wie navigierst Du auf der Seite auf einem Smartphone wenn Du in dem DIV scrollen kannst?

 

[Webentwickler]

Aber es sollte mit DIV und der Overflow-Eigenschaft gehen.
Jeder Div müsste dann die volle ViewPort-Höhe bekommen.

Explizite Overflows fressen Margins und Paddings von Containern und Strukturelementen auf, das sieht dann unschön aus oder man muss mit leeren Elementen als Pseuso-Margins bzw. -Paddings arbeiten.

Womit ich gute Erfahrungen gemacht habe, ist Containern und Strukturelementen eine sich auf die Bildschirmgröße beziehende min-height, bspw. 100vh, zu geben und es dabei zu belassen. Der Overflow entsteht trotzdem, die Container und Strukturelemente behalten aber ihre Margins und Paddings.