darstellungsfehler mit css bei mobile optimierung

[Zornbringer]

hi, ich bin grad dabei eine homepage zu optimieren, so dass sie besser auf mobilen endgeräten dargestellt werden kann.

ich schreibe die site komplett im notepad und bin auf ein kleines problem gestoßen, dass ich nicht ganz nachvollziehen kann.

für die navigation nutze ich eine sog. flexbox (nur "flex", flexbox ist veraltet)

html code:

<div id="nav">
<a href="links.html">links</a> 
<a href="links.html">links</a> 
<a href="links.html">links</a> 
...
...
...
</div>

hier der css code:
(unnötigen code hab ich entfernt)

div#nav
{

padding:0;
margin:0;
width:100%;
text-align:center;
display:flex;
flex-direction:column;
align-content: center;
align-content: flex-start;
align-items: center;

}

@media all and (min-width: 800px)
{
div#nav
{
flex-direction:row;
justify-content: center;
}
}

div#nav a
{
padding:0;
margin:0.2em;
padding-top:1em;
padding-bottom:1em;
padding-left:2em;
padding-right:2em;
width:50%;
}

@media all and (min-width: 800px)
{
div#nav a
{
width:auto;
border:0;
}
}

div#nav a:hover
{
padding:0;
margin:0.2em;
padding-top:1em;
padding-bottom:1em;
padding-left:2em;
padding-right:2em;
}
@media all and (min-width: 800px)
{
div#nav a:hover
{
width:auto;
border:0;
}
}

nun, wenn ich diese lösung im browser sowohl im vollbild als auch bei reduzierter seitenbreite (wie im hochformat eines handys) nutze, funktioniert alles einwandfrei. wenn ich die seite aber tatsächlich auf einem handy darstelle, oder hier teste:

https://developers.google.com/speed/pagespeed/insights/

werden die buttons der navigation komisch übereinander dargestellt. wo ist das problem?

danke im voraus.

 

[Daaron]

Mal eins vorweg: div#nav ist unsinnig. Einerseits ist eine Navigation semantisch eher ein <nav>, andererseits üblicherweise eine unsortierte Liste von links. Also: <nav><ul><li><a>link1</a></li><li><a>link2</a></li></ul></nav>. Andererseits identifiziert #nav das Objekt doch schon präzise, das div davon erhöht nur die Spezifizität unnötig und macht dir späteres Refactoring (z.B. auf <nav>) schwerer.

Was mir hier am CSS irgendwie fehlt ist ein display:block; für die Links. Außerdem solltest du unbedingt die Fallback-Deklarationen für Flexbox verwenden.
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
Sowas hilft wirtschaften.

Und zur Analyse: Chrome hat eine echt gute Mobile-Emulation. Nutze sie.

 

[Zornbringer]

Was mir hier am CSS irgendwie fehlt ist ein display:block; für die Links. Außerdem solltest du unbedingt die Fallback-Deklarationen für Flexbox verwenden.
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
Sowas hilft wirtschaften.

Und zur Analyse: Chrome hat eine echt gute Mobile-Emulation. Nutze sie.

die display:block felder hab ich oben entfernt, weil es unnötiger code war. damit hab ich schon diverse sachen getestet und somit eigentlich als fehlerquelle ausgeschlossen.

kann man mehrere fallback-deklarationen in die css schreiben? ich bin noch nicht so weit fortgeschritten. bringe mir das stück für stück selbst bei. selfhtml war ne große hilfe bis jetzt.

mir ist auch neu, dass chrome ne vernünftige mobile emulation hat. danke, das wird mir sehr helfen.

ich habe jetzt erst mal die änderung wieder rückgängig gemacht und nutze eine inline-box anstatt der flexbox. nächste woche werde ich mal schauen, ob ich es noch hinbekomme, wie ich es vor hatte. ich werde auch schauen, ob ich die navigation etwas optimiere. ich habe es anfangs mal mit listenelementen versucht aber wie bei listen übrig, wurde es untereinander dargestellt. und dann hab ich mich entschlossen, es doch so zu implementieren.

danke erstmal.

 

[Daaron]

Ja, man SOLLTE sogar die Fallbacks immer mit rein schreiben, außer man unterstützt explizit nur 100% standardkonforme Browser. Das wäre aber ziemlich dämlich.

Wann immer du Fallbacks über Vendor Prefixes untersützt, halte dich an obige Reihenfolge: Erst die Präfixe, dann die reguläre Version ohne Präfix. Der Browser geht CSS immer von oben nach unten durch und nimmt die letzte Deklaration, die er versteht. Dadurch greift auf modernen Browsern die offizielle Version, alte Browser kommen aber immer noch klar.
Natürlich wirst du hier und da noch viel komplexere Fallbacks schreiben müssen. Da kann es durchaus sein, dass du mal z.B. auf einen Browser triffst, der gar keine Flex-Implementierung beherrscht. Da in reinem CSS einen Fallback zu schreiben kann extrem ausarten oder schlichtweg unmöglich sein. An der Stelle lohnt es sich, auf JS zu setzen, genauer gesagt Modernizr. Das packt dir dann bei nem IE8 eine zusätzliche CSS-Klasse "no-flexbox" ans <html>-Element.