CSS wird vom IE komplett ignoriert

[suit]

Wie man eine Suchmaschine bedient weißt du?

Ja das weiß ich... hatte nur gedacht, dass es etwas schneller geht, wenn das kurz einer erklären kann, der das weiß, anstatt dass ich jetzt erst mal wieder stundenlang bei Google rumsuche...

Es ist kein triviales Thema und grade jetzt besonders im Fluss, weil ständig neue Mobilgeräte mit irgndwelchen "Erfindungen" auf den Markt kommen.

Also ich hab ja auch schon was mit dem viewport drinstehen:
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

Weißt du auch was diese Sachen tun und welche Browser welcher Mobilgeräte sie verstehen und nutzen?

Ja, und zwar bewirkt diese Zeile, dass die Seite/App genau so breit dargestellt wird, wie der Bildschirm breit ist und man keinen horizontalen Scrollbalken braucht. Die Zeile wird von allen nicht-mobilen Browsern ignoriert. Lasse ich sie aber weg, wird auf einem Smartphone (egal welches) die komplette Breite der Seite/App angezeigt, was natürlich alles viel kleiner erscheinen lässt und nicht gerade benutzerfreundlich ist.

Mit anderen Worten: für einen Tablet-Benutzer wäre das sicher noch ok, für jemanden mit einem Mobiltelefon mit kleinem Display (nein, kein Smartphone mit 800x480 oder ähnliches) und Opera Mini würde das bedeuten, dass man deine Site nicht mehr bedienen kann weil "unzoombar" - man müsste erst über das Menü das Renderverhalten auf Small-Screen-Rendering umstellen und deine CSS-Angaben völlig ignorieren.

Oder wie kann ich das (besser) machen?

Indem du spezifizierst, was du machen möchtest - es gibt momentan etwa 4 relevante Browser für Mobilgeräte. Unter iOS gibt es Safari und unter Android gibt es "Den Browser der irgendwie wie Chrome ist aber doch nicht ganz aber je nach Mobilfunkanbieter anders heisst", Opera und Firefox.

Da ich oben ja schon gesagt habe, dass die Breite unterschiedlich ist, muss ja auch evtl. an manchen Stellen das Layout angepasst werden, damit es gut lesbar und bedienbar ist.

Warum?

Usability sagt dir was?

Ja - und mir geht es absolut auf den Senkel, wenn mir jemand vorschreibt wie und in welcher Größe ich eine Website ansehen muss - und besonders dann, wenn sie auf meinem Mobilgerät völlig anders aussieht wie auf meinem Tablet oder wenn ich das Browserfenster verkleinere sich plötzlich das Layout völlig verändert - das hat nichts mit Usability zu tun sondern eher etwas mit Besucher vergraulen.

Und das soll dann eben auch auf allen Smartphones gehen, also wenn möglich auch auf dem Windows Phone, das ja den IE benutzt.

Ja, irgend einen dreckigen IE7-Mist den man nicht als Browser bezeichnen kann - aber zoomen kann er - der Marktanteil ist am Smartphonesegemnt bei etwa 2 bis 3 % - das ist momentan vernachlässigbar. Wichtig sind Android, iOS und Symbian mit den genannten Browsern.

Und da liegt im Moment das Problem. Der IE mag die Media Queries nicht. Aber wie kann ich das sonst machen?

Lass die Site wie sie ist und Sorge dafür dass sie wenig komplexität aufweist und schnell geladen wird - ich wiederhole mich ungern.

Meintest du das mit "spezifizieren"?

Nein, du hast im Grunde genommen lediglich wiederholt, dass die Site auf "allen Mobilgeräten" gut aussehen soll obowohl du noch nichtmal deine Zielgruppe kennst und für welche Geräte und Browser du überhaupt optimieren musst. Vielleicht haben bei dir ja die Windows-Phone-7-Benutzer einen höheren Anteil?

Nein, ich verlange kein Geld dafür. Warum fragst du? :-)

Wenn man Geld verlangt, sind idR. ein paarhundert Euro für einige Testgeräte eine gute investition. Nagelneue Android-Smartphones wo du vier der verbreitesten Browser testen kannst bekommst du nagelneu ohne Vertrag ab etwa 150 Euro.