So, die Mobile-Optimierung ist nun online ( Z7.de ). Danke für alle Tipps und Hinweise
Stimmt, das mit Mediatype Handheld war ne dumme Idee von mir. Laut der Beschreibung des Types geht es dabei auch um recht exotische Geräte wie: (Handcomputer wie Palms oder Mobiltelefone, meist mit monochromen Bildschirmen und geringer Bandbreite / Zitat aus Artikel, obiger Link zu heise.de), also nix wie Smartphone und Tablet. Habe ich halt anfangs falsch interpretiert.
Die wesentliche Differenz zwischen Desktop und Mobile habe ich wie folgt in einer einzigen CSS-Datei geregelt:
div#HeadNavi {
position:absolute; top:12px; text-align:center; width:94%; }
@media (min-width:590px) {
div#HeadNavi {
position:absolute; top:12px; text-align:center; width:70%; } }
Drei solcher div Tags habe ich so in der Art formatiert, das ist alles. Der Clou dabei ist, das bei der 590px Grenze aus einem 2 Spalten-Layout eine einzige schlauchartige Spalte wird. Das genügt für meinen Fall. Ansonsten habe ich die Pixelangaben der Schriftgrößen alle in em statt px angegeben. Damit waren dann alle Kompatibilitätsprobleme beseitigt.
Die Menuleiste oben ist noch nicht, wie ich es für schmale Displays plante, auf das 3-Balken-Icon minimiert. Aber vorerst passt es in der Breite auch auf ein 320px breites Display. Google scheint auch zufrieden damit zu sein. Ein Feinschliff vom Layout wird allerdings noch folgen. Falls jemand Verbesserungsvorschläge hat, nur zu