IE (Windows Phone) stellt 2. Listenebene riesig dar

bossa · #1 (**permalink**) 08.11.2013, 10:11

Hallo,

musste mich mal neu anmelden, weil ich mein Problem einfach nicht gelöst bekomme und auch im Netz keine Informationen finde.

Folgendes:
Ich versuche gerade eine bestehende Webseite für Smartphonebrowser zu optimieren. Zum Testen habe ich hier mein Windows Phone mit W 7.8 wo der IE 9 drauf läuft.

Das Problem ist ein ganz einfaches: Der IE auf dem Smartphone stellt die zweite Listenebene immer viel zu groß dar. Ich habe mal testhalber versucht die Seite komplett freizuräumen und nur das zu testen, also:

HTML-Code:

... Header mit CSS-Einbindung ...

<body>
  <ul>
    <li>Einträge 1
      <ul>
        <li>Eintrag 1.1</li>
        <li>Eintrag 1.2</li>
      </ul>
    </li>
    <li>Eintrag 2</li>
  </ul>
</body>

Dazu ganz einfach die css:

Code:

ul li { 
  font-family: Arial; 
  font-size: 20pt; 
}
ul ul li {
  font-family: Arial; 
  font-size: 20pt; 
}

Damit wird mir die Schrift von Eintrag 1.1 und Eintrag 1.2 ca. 3x so groß angezeigt, wie die von Eintrag 2.

Wenn ich die Schriftgröße der 2. Ebene ändere:

Code:

ul li { 
  font-family: Arial; 
  font-size: 20pt; 
}
ul ul li {
  font-family: Arial; 
  font-size: 7pt; 
}

sind sie in etwa gleich groß.

Das liegt auf jeden Fall am IE 9 auf dem Windows Phone, denn auf allen anderen PC-Browsern, auch die IEs, ist im zweiten Fall die zweite Listenebene natürlich VIEL kleiner als die erste.

Ich bin etwas verwundert, weil das doch eigentlich nicht an der "üblichen Fehlinterpretation" des IE liegen kann. Die zweite Listenebene immer 3x so groß darzustellen wie mit CSS festgelegt macht ja nun wirklich keinen Sinn.

Die zweite Listenebene sieht übrigens auch auf anderen Webseiten immer viel zu groß aus.

Das kann doch einfach nicht sein! Ich will auch noch eine Browserweiche vermeiden, da das ohnehin schon kompliziert und unsauber war, es bis hierhin zu schaffen...

protonenbeschleuniger · #2 (**permalink**) 08.11.2013, 10:22

Ich weiß nicht ob es etwas damit zu tun hat, aber pt ist nicht unbedingt eine sinnvolle Angabe für den Screen, meinst du Pixel?

bossa · #3 (**permalink**) 08.11.2013, 10:37

Völlig egal, welche Angabe ich mache. Auch wenn ich gar keine CSS mache, wird die zweite Ebene 3x so groß dargestellt.

Mit pt komm ich auf mobilen Browsern etwas sinnvoller hin.

Hab grad mal geschaut, z.B. auch die SELFHTML-Beispiele mit 2 Listenebenen werden falsch dargestellt. Es hat wirklich nichts mit Programmierfehlern meinerseits zu tun. Ist bei allen Webseiten so.

Ich denke gerade darüber nach, mir über IDs der Listenpunkte in CSS eine zweite Ebene zu definieren.

Also in der Art:

HTML-Code:

<ul>
  <li id="ebene1">Eintrag 1</li>
  <li id="ebene2">Eintrag 1.1</li>
</ul>

Dann könnte ich in der CSS-Datei die #ebene2 einfach einrücken und mit anderem list-style-type versehen. Das würde sicher in allen Browsern laufen, aber ich find das wirklich mal so völlig daneben im IE. Kann mir doch keiner erzählen, dass die vor dem Release nicht getestet haben, wie eine zweite Listenebene aussieht...

protonenbeschleuniger · #4 (**permalink**) 08.11.2013, 11:44

In was für einen Modus wird die Seite denn überhaupt dargstellt?

heiko_rs · #5 (**permalink**) 08.11.2013, 12:02

Mobile Browser vergrößern gerne Text, wo auch immer sie es für richtig halten - oft mit sehr eigentümlichen Resultaten. Die übliche Abhilfe ist: CSS Mobile Text Size Adjustment Module Level 1

Mit den üblichen Prefixes, wobei Geckos dann den Wert none bekommen (da sie Prozentwerte ignorieren) und Webkits 100%, da sie beim Wert "none" fälschlicherweise die komplette Seite nicht mehr zoomen.

Aber das ist alles noch eine Grauzone, wie auch der Link zeigt - z.B. ist die Wirkung von Prozentwerten de facto noch undefiniert (siehe "Issue 4"), und nicht zuletzt deswegen verhalten sich die Browser auch noch unterschiedlich (siehe voriger Absatz). Abgesehen davon, dass Chrome auf Android sogar alles diesbzgl. ignoriert.

Aber: Normalerweise ist das eingangs beschriebene Verhalten inkl. seiner Abhilfe per CSS eh obsolet (auch in Chrome auf Android), sobald eine Seite ein meta-viewport-Element hat - hat Deine Seite eines? (Ohne ein solches ist ein vernünftiges Resp. Layout nicht durchführbar.)

bossa · #6 (**permalink**) 08.11.2013, 13:11

Zitat:

Zitat von protonenbeschleuniger

In was für einen Modus wird die Seite denn überhaupt dargstellt?

Was meinst du mit "Modus"?

Heiko:
Danke für diesen Link. Ich bin mir grad noch nicht sicher, wie binde ich das jetzt genau ein? Ist es einfach nur ein CSS-Befehl? Dann funktioniert er nicht (mit diesem Browser).

heiko_rs · #7 (**permalink**) 08.11.2013, 13:17

Der IE braucht dafür natürlich sein eigenes Prefix -ms-, aber wie gesagt, bei Vorhandensein eines meta-viewport-Elementes ist das eh obsolet.
http://msdn.microsoft.com/en-us/libr...ewithCustomCSS

Poste am Besten mal alles, was auf Deiner Testseite zwischen <head> und </head> steht.

bossa · #8 (**permalink**) 08.11.2013, 13:55

Nicht wundern, ist etwas abenteuerlich.

Ich will eine Browserweiche auf CSS, da die Seite irgendwann noch mal in Sharepoint umgesetzt werden soll und ich bei einem CMS ungern jeden Inhalt doppelt und Dreifach pflegen will (wie es meines Erachtens nach notwendig wäre, wenn man eine Browserweiche über PHP auf verschiedene HTML-Seiten macht, wie so oft im Netz vorgeschlagen).

Hier also eine selbstausgedachte "mehrstufige" Browserweiche.

- Alle älteren IEs bekommen style.css mit der üblichen Browserweiche, die man schon früher dafür genommen hat. Die muss ich nehmen, da die alten IEs die folgenden Browserweichen gar nicht können.

- Dann kommt die Browserweiche für mobile Geräte mit geringen Auflösungen

- Der IE 10 kann mit der Browserweiche irgendwie nicht so recht, also kriegt der noch mal eine eigene, die ich so nachgeschlagen habe.

Funktiert auch alles so weit, IE 6,7,8 und 10 konnt ich testen. 9 ist quasi auf'm Handy. 9er PC-Version konnte ich noch nicht testen. Alle anderen Browser kommen damit klar.

HTML-Code:

<head>
<title>Titel</title>
<meta name="author" content="Autor">
<meta name="keywords" content="Content">
<!--[if lt IE 9]>
  <link rel="stylesheet" type="text/css" href="../style.css" />
<![endif]-->

<link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 1279px)" href="../stylemobile.css" />
<link type="text/css" rel="stylesheet" media="only screen and (min-device-width: 1280px)" href="../style.css" />

<link rel="stylesheet" type="text/css" media="only screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-device-width: 1279px)" href="../stylemobile.css" />
<link type="text/css" rel="stylesheet" media="only screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (min-device-width: 1280px)" href="../style.css" />

</head>

heiko_rs · #9 (**permalink**) 08.11.2013, 14:18

Wie ich mir schon dachte, fehlt besagtes meta-Element. Ich habe kürzlich alles dazu erklärt: http://xhtmlforum.de/70185-mobile-br...tml#post534599

Ein Responsive Layout in Abhängigkeit von device-width ist imho nicht unbedingt sinnvoll und macht das Ganze enorm kompliziert - nicht zuletzt wegen Apple (siehe mein Link), aber auch, weil es bei einem Resp. Layout ja in erster Linie darum geht, das nervige Zoomen und anschließende seitliche Schieben, das bei normalen Seiten nötig ist, abuzschaffen.

Und das kommt dadurch zustande, dass mobile Browser einen default-Viewport haben (z.B. Apple mit 980px), der zwar okay für die meisten Websites ist, aber viel zu groß für ein Smartphone-Display und daher kleingezoomt wird (auch dazu siehe mein Link). Und das muss man ändern, siehe letzter Absatz.

Abgesehen davon ändern sich die Breiten eh ständig, d.h. Du musst immer wieder ran, wenn neue Geräte kommen (wobei sich das bei Deiner Unterscheidung in "ab 1280px oder drunter" natürlich noch in Grenzen hält).

Wesentlich sinnvoller finde ich, das Layout an den tatsächlichen Viewport anzupassen, den das Gerät hat (auch das ist auf dem Link erklärt) - damit kommen alle mobilen Geräte auf Anhieb perfekt klar und Du kannst das Ganze sogar noch bequem per Desktop testen, indem Du den Viewport schmaler oder breiter ziehst. Und es werden sogar auch Desktops erfasst, die zwar als device-width z.B. 1280px wiedergeben, aber deren Nutzer nicht mit voller Viewport-Breite surfen.

bossa · #10 (**permalink**) 08.11.2013, 14:38

Oh,

Mensch, das funktioniert wirklich mit dem -ms- davor. Wundert mich zwar, dass er es ohne -ms- nicht macht - hatte dieses Kürzel immer als exklusive IE-CSS-Einstellung betrachtet, aber eben neben den üblichen Anweisungen.

Naja, ist wie es ist. Die beiden verlinkten Seiten sind jedenfalls ein sehr guter Ansatzpunkt für weitere Probleme, die mal auftauchen können. Danke dafür!

Dann sieht das ja jetzt richtig gut aus.

Jetzt muss ich nur noch rausfinden, warum der WP IE mir manchmal (manchmal ja, manchmal ne) aus heiterem Himmel einen Zeilenwechsel zwischen Bild und Text in meinen Brotkrumenpfad haut. (edit: auch wenn das jetzt hier gar nicht reingehört...)

HTML-Code:

<div id="path" >
         	<div id="breadcrumb"><img src="../images/raute1.jpg"><a href="home.html">Menüpunkt 1</a></div>
                 <div id="breadcrumb"><img src="../images/raute1.jpg"><a href="leistungsspektrum.html">Menüpunkt 2</a></div>
                 <div id="breadcrumb"><img src="../images/raute1.jpg"><a href="projektmanagement.html">Menüpunkt 3</a></div>
                 <div id="breadcrumb"><img src="../images/raute2.jpg"><a href="qualitaetsmanagement.html">Menüpunkt 4</a></div>
         </div>

Deinen Beitrag schau ich mir gleich mal gern an. Natürlich ist die Weiche nach Aüflösung nicht zukunftsfähig. Irgendwann machen unsere Smartphones unsinnigerweise auch 4k...

Ich hoffe ja ehrlich gesagt noch darauf, dass die ganzen Hersteller und das entsprechende Konsortium sich zusammenfinden und eine allgemeine Lösung dieses Problems sauber zur Verfügung stellen. Von außen betrachtet ist dieses ganze "Gebrowserweiche" ja eine Zumutung. Eine klare Norm, die sagt, wie ein Gerät/Browser eindeutig klar macht, welchem Format es angehört und eine entsprechend völlig klar definierbare Weiche sollten doch irgendwann mal drin sein. Noch hab ich Hoffnung, weil ich denke, dass das NOCH nicht ganz aus den Kinderschuhen raus is. Aber vielleicht bin ich auch viel zu naiv.

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Chat-Thread	paracelsus	Offtopic	22838	27.09.2022 13:27