Fixed headerBlock: Problem bei iOS/ Android

Hier bekommst Du deutschsprachigen Support. Keine Fehlermeldungen oder Erweiterungswünsche bitte!
Post Reply
User avatar
kukki
Posts: 1707
Joined: Mon 7. Feb 2005, 20:02
Location: Berlin Köpenick
Contact:

Fixed headerBlock: Problem bei iOS/ Android

Post by kukki »

Eigentlich ist mir das bis heute noch nicht so entscheidend aufgefallen. Bei der Umstellung einer Band-Website auf responsive (OHNE Bootstrap) war es in der Desktop-Version nicht zu bemerken:

ein ge"fixter" Header, mit drunter durchlaufenden mainBlock funktioniert unter Windows alle Mal - und crossbrowserkompatible. Aber: auf meinem älteren Testgerät, einem Touchlet X4 mit älterer Android-Version- deswegen nicht entsorgen :!: - sah die Sache komisch aus, der headerBlock war verschwunden, auf meinem Panasonic-Handy sah alles super aus.

Dann fand ich nach einiger Suche den entscheidenden Hinweis:

Code: Select all

-webkit-backface-visibility: hidden;
Der Header muss damit ein wenig "behandelt werden", damit er auch auf diesen alten Geräten zu sehen ist :roll:

Code: Select all

left: 50%; /* bei 100% Breite reicht dann auch ein "0" */
margin-left: -512px; /* nur notwendig, wenn man eine selbstzentrierende Seite zusammengeschoben hat, ansonsten reicht mergin: 0;*/
position: fixed;
top: 0;
width: 1024px; /* gleiche Breite, wie mein containerBlock */
-webkit-backface-visibility:hidden; /*der entscheidende Fix ohne JScript!*/
angeblich soll das mit gefixten footerBlock ähnlich sein, dass konnte ich aber nicht feststellen, da funktionierte alles wie gewohnt. 8)
Lieber arm dran als Arm ab!

meine historische Website: Jagdgeschwader 300 1.9.34-R554
kukki's SpIeLwIeSe V.1.9.33 R553 responsive
Post Reply