Flexbox Layout funktioniert auf Windows Phone nicht

[Caroline Markwalder]

Guten Tag

Ich habe eine Internetseite mit Flexbox umgesetzt. Jetzt funktioniert diese auf allen ausprobierten Browsern (inkl. IE10) aber nicht auf meinem Windows Phone. Da wird die Seite total falsch angezeigt. Ich habe gedacht Windows Phone 8.1 arbeite mit IE11, aber dem scheint nicht so.

<article class="mitUmbruch"><!-- Aktuelles -->
			<h1>Aktuell</h1>
			<p>Am 4. November 2016 findet die Ausstellung "Glanzmomente im Halterhaus / Bilder und Lampen" statt.<br />
			Hier geht's zum <a href="Bilder/Aktuell/FlyerRueckseite.jpg" target="_new">Flyer</a></p>
		</article>
		
		<article class="mitUmbruch"><!-- Portrait -->
		<img src="Bilder/Portrait.jpg" alt="Portrait" title="Portrait" style="width:200px;height:269px;" />
		
		
		</article>

main {
	padding:1em;/* Abstand Inhalt zu Header und Rand */
	text-align:center;
	display: -webkit-box; /* main wird zu flexbox */
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
	-webkit-display: flex;
	display:flex;
	-webkit-box-flex-direction:column;/*Alle Artikel in main werden auf die ganze Seite aufgezogen*/
	-moz-box-flex-direction:column;
	-ms-flex-direction:column;
	-webkit-flex-flow:column; 
	flex-flow:column;
	-webkit-box-justify-content:center;/* Die enthaltenen Boxes werden zentriert plaziert. */
	-moz-box-justify-content:center;
	-ms-flex-justify-content:center;
	-webkit-justify-content:center;
	justify-content:center;
	box-shadow: 0px 3px 3px #727270 inset;/* Dunkelgraue Abtrennung unterhalb Navigation */
}

.BildVergroessern:active{
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	-o-transform: scale(2);
	transform: scale(2);
}

.BildVergroessern:hover{
	-webkit-transform: scale(2);
	-moz-transform: scale(2);
	-ms-transform: scale(2);
	-o-transform: scale(2);
	transform: scale(2);
}

main img{
	padding-right:1em;
}

.mitUmbruch h1,h2,h3{
	-webkit-box-flex:1 1 100%;/* Titel nehmen 100% der Breite ein */
  	-moz-box-flex:1 1 100%;
 	-ms-flex:1 1 100%;
	-webkit-flex:1 1 100%;
  	flex:1 1 100%;
}

.mitUmbruch {
 	padding-bottom:0.5em;
	padding-top:0.5em;
	display: -webkit-box; 
  	display: -moz-box;
  	display: -ms-flexbox;
  	display: -webkit-flex;
	-webkit-display: flex;
	display:flex;
	-webkit-box-flex-flow:row wrap;/* Artikel wird in Zeilen orientiert. Alle boxes sind gleich hoch. */
	-moz-box-flex-flow:row wrap;
	-ms-flex-flow:row wrap;
	-webkit-flex-flow: row wrap;
	display-flow:row wrap;
	-webkit-box-justify-content:center;/* Die enthaltenen Boxes werden zentriert plaziert. */
	-moz-box-justify-content:center;
	-ms-flex-justify-content:center;
	-webkit-justify-content:center;
	justify-content:center;
	border-bottom: 1px solid #727270;
}

Raus kommt auf dem Windows Phone folgendes:

Übersehe ich einen Fehler im Code? Ich weiss, dass Windows Phone nicht wirklich sehr verbreitet ist, aber es ärgert mich, dass ich selbst die Seite nicht anschauen kann, da ich ja ein Windows Phone habe. ;-)

Ich hoffe der Beitrag ist nicht zu lang oder unverständlich oder sonst nervig.
LG und vielen Dank für die Antworten im Voraus

[MrMurphy1]

Hallo

Ich hoffe der Beitrag ist nicht zu lang oder unverständlich oder sonst nervig.

Weder zu lang noch nervig. Aber leider teilweise unverständlich. Ich kann weder die Bilder aufrufen noch sind Problembeschreibungen wie

Da wird die Seite total falsch angezeigt.

und

dass ich selbst die Seite nicht anschauen kann

irgendwie nachvollziehbar, jedenfalls für mich.

Hilfreich wäre in jedem Fall ein Link zu der Seite, es gibt dazu Freeware-Webspace-Anbieter wie bplaced.net.

Gruss

MrMurphy

[Matthias Apsel]

Hallo MrMurphy1,

Ich kann weder die Bilder aufrufen

Die hab ich mal repariert.

Bis demnächst
Matthias

[Rubbeldiekatz]

Ich habe eine Internetseite mit Flexbox umgesetzt. Jetzt funktioniert diese auf allen ausprobierten Browsern (inkl. IE10) aber nicht auf meinem Windows Phone. Da wird die Seite total falsch angezeigt. Ich habe gedacht Windows Phone 8.1 arbeite mit IE11, aber dem scheint nicht so.

http://caniuse.com/#search=flexbox zu Folge unterstützt der IE11 Flexbox nur teilweise bzw. leidet an einem "large amount of bugs".

Nun sagst du zwar, es ginge mit dem IE10, aber vielleicht schaust du trotzdem mal in der Fehlerliste nach Übereinstimmungen. Womöglich gibt es auch Unterschiede zwischen dem Desktop-IE und einem Phone-IE.

[marctrix]

Hej Caroline,

ist Dein Problem noch aktuell?

Flexbox wird ja nun recht durchgängig von den aktuellen Browsern und den meisten Vorgänger-Versionen unterstützt - auch ohne Vendor-Präfixe, die eh nicht das Gelbe vom Ei sind. Darauf würde ich verzichten. Ältere Browser zeigen dann alles untereinander an und es wirkt ein wenig, als wäre man auf einer mobilen Ansicht einer Webseite und nciht, als wäre es kaputt. Nutzer kennen das, weil in sozialen Medien zum Beispiel oft Links von Seiten geteilt werden, die mit dem Handy besucht wurden, so dass ein direkter Link zur Handy-Version eingestellt wird.

Insofern kann man damit IMHO gut leben.

Dann würde ich alle inline-Styles rauswerfen. Insbesondere bei responsiven Seiten solltest du keine Pixel-Angaben in den inline-Styles machen (im HTML für Bilder mittels width und height machen die kein Problem, weil du das in einem zentralen Stylesheet überschreiben kannst).

Weiterhin solltest Du bei der Erstellung des Layouts mit der Darstellung auf den kleinsten Geräten beginnen (mobile first).

Danach erst um größere Geräte (Tablets, Desktops) kümmern.

Flexbox hilft dabei, mit wenigen media-Queries auszukommen. Folgender Code reicht für ein simples, responsives Layout:

<body>
<header>
  <h1>Lorem</h1>
</header>

<main>
  <nav>
    <h2 class="visuallyhidden">Hauptnavigation</h2>
    <ul>
      <li><a href="foo.htm">Foo</a></li>
      <li><a href="bar.htm">Bar</a></li>
    </ul>
  </nav>

  <div class="content">
    <article>
      <h2>Heureka!</h2>
      <p>Lorem ipsum...</p>
      [..]
    </article>
  </div>

  <aside>
    <h2 class="visuallyhidden">Weiterführende Informationen</h2>
    <article>
      <h3>Verwandte Artikel</h3>
      <ul>
        <li><a href="foo.htm">Foo</a></li>
        <li><a href="bar.htm">Bar</a></li>
      </ul>
    </article>
  </aside>
</main>

<footer>
  <h2 class="visuallyhidden">Urheberrechtshinweis</h2>
  <p>&copy; 2016 by Caroline</p>
</footer>
</body>

main {
  display: flex;
  flex-flow: row wrap;
}
nav,
.aside {
  flex-basis: 20em;
  flex-grow: 1;
}
.content {
  flex-basis: 40em;
  flex-grow: 2;
}
@media screen and (min-width: 40em) {
    .content {
      order: -1;
    }
}

Habe das mal zum rumspielen online gestellt...

Mein Tipp: Mach neu! Beginne mit so etwas simplem und füge dann nach und nach hinzu, was dir noch fehlt, bis du mit dem Aussehen zufrieden bist. Teste zwischendurch immer wieder.

Wenn du die Dinge einfach hältst, passieren weniger Fehler!

Marc

[marctrix]

Hej Caroline,

habe die Erklärung vergessen

main {
  display: flex;
  flex-wrap: wrap;
}

Der Hauptbereich wird zum Flexbox-Container, den enthaltenen Boxen (Flex-items) wird erlaubt, bei Platzmange untereinander zu stehen.

nav,
.aside {
  flex-basis: 20em;
  flex-grow: 1;
}

Die Randspalten für Navi und weiterführende Infos bekommen eine Ausgangsbreite zugewiesen. Wenn der Platz nicht reicht, werden diese umbrechen. Sie wachsen im Verhältnis 1:1

.content {
  order: -1;             /* war im letzten Posting nicht drin, muss aber an diese Stelle! */
  flex-basis: 40em;
  flex-grow: 2;
}

Der Inhalt wird auf kleinen Bildschirmen zuerst angezeigt, danach erst Navi und Randspalte (Navi könnte man auch ganz an das Ende setzen mit nav {order:1;}).

Der Content-Bereich für ein bis unendlich viele Artikel soll doppelt so groß sein, wie die beiden Randspalten. Darum erhält er eine Ausgangsgröße von 40em und er wächst im Vergleich zu den Randspalten im Verhältnis 2:1 wenn genügend Platz zum wachsen vorhanden ist (sonst wird umgebrochen).

@media screen and (min-width: 40em) {
    .content {
      order: 0;   /* War im letzten Posting leider falsch ... :-( */
    }
}

Auf größeren Bildschirmen soll der Inhaltsbereich zwischen den beiden Randspalten stehen. Mit den einzelnen Angaben für min-width und den Spaltenbreiten musst du etwas herumexperimentieren, bis sie dir gefallen... ;-)

Marc