Fixed headerBlock: Problem bei iOS/ Android
Posted: Tue 29. Mar 2016, 18:37
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:
Der Header muss damit ein wenig "behandelt werden", damit er auch auf diesen alten Geräten zu sehen ist 
angeblich soll das mit gefixten footerBlock ähnlich sein, dass konnte ich aber nicht feststellen, da funktionierte alles wie gewohnt. 
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;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!*/