CSS CSS greift auf Smarphones nicht

[cumulonimbus8]

…und zwar auf verschiedenen SP-OS und mit verschiedenen Browsern.

Moin!

Braucht man, vorweg gefragt, eigentlich noch so eine Zeile?

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">

Ich habe in HTML diese Zeile verbrochen:

<div id="topbanner1"><font face='Arial' size='1'></font></div>

Dazu gesellt sich dieses Stück CSS:

#topbanner1{
 width:100%;
 background-color:#314668;
 background-image:url("./banner-top1.png");
 background-repeat:no-repeat;
 background-position:left;
 height:144px;
 background-size:contain;
}

Resultat ist eine Art Logo zur linken mit einer gewissen Breite in Pixel und der Rest dieses Bereiches wird mit der angegeben Farbe gefüllt. Das Browserfenster kann nun schmaler oder weiter gezogen werden, der rechte Teil bleibt dunkelblau.

Um vorzugreifen probierte ich anschließend diese Variante

<div id="topbanner1" class="topbanner1background"><font face='Arial' size='1'>&nbsp;</font></div>

#topbanner1{
 width:100%;
 /* background-color:#314668; */
 background-image:url("./banner-top1.png");
 background-repeat:no-repeat;
 background-position:left;
 height:144px;
 background-size:contain;
}
.topbanner1background{background-color:#314668;}

Auf allen lokalen Browsern sieht das gleich aus. Hierzu gibt es ein unteres Ende das analog aussieht, außer dass eine Grafik rechtsbündig auftritt.

Nur auf den Smartphones wird der rechte Bereich einfach nicht gefüllt. Ich kann es dort nicht genau sehen, aber er scheint mit der Breite der Grafik banner-top1.png abzubrechen.
Und es kommt noch besser - im Fußbereich ist links in genau der selben Breite der Bereich mit der Hintergundfarbe gefüllt während rechts die Grafik nicht erscheint.

All das was hier rechts der blauen Flächen ist sollte auch blau per background-color sein, das untere Bild ist, so gut es der Schiebefinger kann, genau darunter.

Das ist jetzt vom PC. Der grüne Kasten soll nur dem Auge eine 800px breiten festen Raum angeben, schmaler soll das Grundlayout nicht geschoben werden können.
Das Schräge links oben ist unsere Grafik mit Farbverlauf die damit etwas weiter nach rechts ragt. Ich mutmaße, dass wir ihren Rand oben sehen an den sich kein backgrund anschließt während unten unterhalb der background zu sehen ist. Rechts davon, unter dem Logo, ist eine Farbverlaufgrafik, das Logo wird anders kontrolliert. Diese Grafik (!) ist auf dem Smartphone ebenfalls verschwunden.

Einfache Frage - wie bekomme ich alles zu sehen?

CN8

 

[FranzvonAssisi]

Braucht man, vorweg gefragt, eigentlich noch so eine Zeile?

Ja, ansonsten wird nicht eichtig skaliert. Ich empfehle dir aber:
<meta name="viewport" content="width=device-width; initial-scale=1.0" >

Mit den letzten beiden Attrivuten aus deiner Zeile verhinderst du nämlich das Zoomen - das ist natürlich in den meisten Fällen total blöd, weil wenn jemand was nicht lesen kann, weils zu klein ist, sollte er ranzoomen können.

Ausnahmen sind, wenn du zwei Finger-Gesten anderweitig verwenden willst, da musst du das Zoomen natürlich unterbinden.

Auf deinen Bilfern kann ich nicht so viel sehen, da verpixelt, aber dein Problem kann daran liegen, dass das Handy Dateien zwischenspeichert und nicht neuläd, dass du die Hintergrundfarbe auskommentiert hast, dass der CSS Selektor nicht greift oder irgendwas anderes nicht passt.

Dazu scheinst du ein windows Phone zu benutzen - der IE hat ja auch schon einige Zeit keine Updates mehr bekommen, oder?

Lg

 

[cumulonimbus8]

Ich habe eine Win-Phone… Aber auf einem Androiden ist es exakt dasselbe.
Die obere Grafik gibt offenbar einen Scnhitt an neben dem nicht erscheint.

Zur Viewport-Zeile: die ist nicht meine. Aber danke für den Hinweis, dass so das Zoomen blockiert wird, das ahtte Cheffe mit seinem Androiden nämlich auch bemängelt. (Scheint mir aber so, dass er gnau das zuvor mal angefordert hatte…)
Das tausche ich gleich mal aus!

CN8


Zoom tut wieder.

Aber eben bin ich fast vom Stuhl gefallen. Ohne Nachdneken haben ich Chrome auf offensichtlich weniger als 800px (statische Breite des grünen Bereichs) zusammengestaucht; der horizontale Scrollbalken ist mir gar nicht aufgefallen! Und als ich den irgendwie bewegte habe ich dort den selben Effekt.
Zumindest schrumpfen die auf 100% width eingstellen «Kopf-und Fußzeilen» auf die Breite des realen Browserfensters zusammen - während meine 800px eisern auf ihre Breite pochen. Scrolle ich nach rechts sehe ich diese fehlenden Füllgen.
Ergo habe ich da offenbar ein 100%(-iges) Problem. Wie bekomme ich das in den Griff; gibt es eben width=100% auch so was wie min-width=800px oder so?


In der Tat, es gab min-width was der Sache den Stachel zog.