Hey ho

mal eine kleine Verständnisfrage zwischendurch, mit der Hoffnung das ich nur auf dem Schlauch stehe.

<meta content="width=device-width, initial-scale=1.0" name="viewport">
Eigentlich sollte ein Handy die Seite auf 100% der Breite anzeigen. (richtig?) Mein Problem ist nun, dass die Seite z.B. 360px breit ist und auf einem 320px Display (z.B. älteres iPhone) rechts am Rand abgehackt ist.

Das dürfte doch eigentlich nicht sein oder? Wenn ich aus Spaß den scale Faktor auf 0.888 ändere funktioniert es... aber halte ich für ziemliche Grütze

Danke für Hilfe
Chris

Nein, nicht richtig.
Du sagst explizit, dass nicht gezoomt werden soll, sondern "1 zu 1" angezeigt werden soll. Genau das passiert. 360px sind 360px breit -- und das ist eben zu viel, wenn nur 320px zur Verfügung stehen.

Diese Viewport-Meta-Angabe ergibt nur Sinn, wenn du keine feste Breite fürs Layout verwendest. Stichwort: Responsive Design.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

Merci

Was wäre denn in dem Fall die beste Lösung deiner Meinung nach?

Ich habe heute recht viel rumprobiert aber leider war es nie auf allen Testphones einheitlich. (iphone3-5, paar Androids, Windoof 8 und noch ein etwas älteres Nokia n97 oder so)

Mein Ziel ist:
- auf 320px Display kein abgehackter Rand
- auf großen Display / Pixel Ratio 2 etc soll das ganze Display eingenommen werden (war bisher nie ein Problem)
- auch im Querformat soll es gut aussehen (war meistens auch Ok, Weißraum rechts bei stark unterschiedlicher Breite / Höhe ist Ok (z.B. iphone5))

Responsive Design.
Sich angesichts der unendlich vielen möglichen "passenden" Breiten auf feste Werte festlegen zu wollen kann nicht funktionieren.

Ohne konkretes Anschauungsmaterial ist ohnehin alles nur Spekulation. So kann dir niemand weiterhelfen.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

Responsiv ist leider nicht, da es bereits eine Mobile Site ist und diese an vielen Stelle fest auf 360 Pixel getackert ist.

Aber auch ohne Anschauungsmaterial ist die Frage "Wie bekomme ich 360px auf ein 320px Display" doch bestimmt zu beantworten

Überleg doch mal selbst, was du nicht angeben darfst, um das zoomen nicht zu verhindern.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

Keine Sorge habe schon jede Menge überlegt aber Mobile ist noch nicht so meine Welt und drum frage ich nun nach...
Fehlt in deinem Satz irgendwo 1 Wort, bin mir so nicht ganz sicher was du meinst?
(nicht fies gemeint aber bei solchen Formulieren fühlt sich mein Schlips immer gleich getreten )

Mögliche Lösungsansätze sind aus meiner Sicht eben
a) Scale 0.888 (finde ich aber irgendwie falsch)
b) width:360px, hat aber Nebenwirkungen, dass auf einigen Geräten etwas Platz unausgenutzt bleibt (z.B. Nexus 360*2 = 720px genutzt von 76

Hatte schon überlegt ob ich nicht mit einem JS nachgreife, aber ob das auch überall klappt...

Nein, es fehlt nichts in meinem Satz.
Wenn du nicht willst, dass die Geräte initial "nicht" zoomen, dann darfst du nicht initial-scale=1 hinschreiben.

__________________
Corina Rudel

Online-Einsteigerkurs HTML/CSS | Buch: Fortgeschrittene CSS-Techniken

Nagut, mit mehr Wörtern finde ich dein Satz aber doch gemütlicher zu lesen.

Kleiner Edit für alten Post der coolen Sonnenbrillen Smilie war eine 768 mit schleißender Klammer

Hast du noch einen Tipp bezüglich meiner beiden Lösungsansäze? Hatte das Thema bisher recht mathematisch betrachtet und kann auch gut n Fehler gewesen sein.