| Autor | Zpráva | ||
|---|---|---|---|
| radekt Profil |
Android Browser 4.1.2. a FlexBox
Dobrý den, stránky Římské legie (zkušební web), rozvržené pomocí Flexboxu mají špatné pořadí identifikátorů. Cílem je, aby - oproti pořadí v kódu - záhlaví bylo vizuálně první, navigace druhá a obsah třetí. html a CSS (zestručněno pro názornost): <style type="text/css" media="screen">
#page {
/* staré verze Google Chrome, Safari, iOS Safari, Android, Blackberry */
display: -webkit-box;
display: -webkit-flex;
/* Internet Explorer 10, Internet Explorer Mobile */
display: -ms-flexbox;
/* staré verze Firefoxu */
display: -moz-box;
/* W3C 2009 */
display: box;
/* W3C 2011 */
display: flexbox;
/* W3C 2012 */
display: flex;
/* staré verze Google Chrome, Safari, iOS Safari, Android, Blackberry */
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
/* Internet Explorer 10, Internet Explorer Mobile */
-ms-flex-direction: column;
/* staré verze Firefoxu */
-moz-box-orient: vertical;
-moz-box-direction: normal;
/* W3C 2009 */
box-orient: vertical;
/* W3C 2012 */
flex-direction: column;
}
#header {
/* staré verze Google Chrome, Safari, iOS Safari, Android, Blackberry */
-webkit-box-ordinal-group: 1;
-webkit-order: 1;
/* Internet Explorer 10, Internet Explorer Mobile */
-ms-flex-order: 1;
/* staré verze Firefoxu */
-moz-box-ordinal-group: 1;
/* W3C 2009 */
box-ordinal-group: 1;
/* W3C 2012 */
order: 1;
}
#nav {
/* staré verze Google Chrome, Safari, iOS Safari, Android, Blackberry */
-webkit-box-ordinal-group: 2;
-webkit-order: 2;
/* Internet Explorer 10, Internet Explorer Mobile */
-ms-flex-order: 2;
/* staré verze Firefoxu */
-moz-box-ordinal-group: 2;
/* W3C 2009 */
box-ordinal-group: 2;
/* W3C 2012 */
order: 2;
}
#article {
/* staré verze Google Chrome, Safari, iOS Safari, Android, Blackberry */
-webkit-box-ordinal-group: 3;
-webkit-order: 3;
/* Internet Explorer 10, Internet Explorer Mobile */
-ms-flex-order: 3;
/* staré verze Firefoxu */
-moz-box-ordinal-group: 3;
/* W3C 2009 */
box-ordinal-group: 3;
/* W3C 2012 */
order: 3;
}
</style>
<div id="page">
<a href="#"><div id="header" role="banner">Záhlaví</div></a>
<div id="article" role="article">Obsah</div>
<div id="nav" role="navigation">Navigace</div>
</div>Na OS Android 4.1.2. i na Chrome pro Android bylo špatné pořadí, po updatu Chrome pro Android se v Chromu pro Android stránky zobrazují správně. Viz screenshot, vlevo je Android Browser, vpravo Chrome. V Android Browseru je místo záhlaví prázdné místo, pak navigace a pod ní teprve záhlaví: 
Jediné, na co jsem přišel je, že když se zruší obalení identifikátoru #header odkazem, tak se to v Android Browseru chová dobře. Věděl by někdo, jak donutit Android Browser dělat dobrotu? Děkuji |
||
| radekt Profil |
Zřejmě jsem na to přišel - když FlexBoxem neřadím identifikátor, ale odkaz, který identifikátor obaluje a ten odkaz přetypuji na blokový prvek, chová se to tak, jak má.
/* Na rozdíl od ostatních prohlížečů Android Browser 4.1.2. nedá #header na začátek, ale až za #nav.
Proto je třeba ve FlexBoxu místo #header určit pořadí jemu nadřízenému odkazu (jenom přímému
potomkovi #page, aby to neplatilo pro všechny odkazy) a přetypovat tento odkaz na blokový prvek. */
#page > a {
display: block;
/* staré verze Google Chrome, Safari, iOS Safari, Android, Blackberry */
-webkit-box-ordinal-group: 1;
-webkit-order: 1;
/* Internet Explorer 10, Internet Explorer Mobile */
-ms-flex-order: 1;
/* staré verze Firefoxu */
-moz-box-ordinal-group: 1;
/* W3C 2009 */
box-ordinal-group: 1;
/* W3C 2012 */
order: 1;
} |
||
|
Časová prodleva: 10 let
|
|||
0