在Android 4.4.2中，Flexbox不能在Android Web浏览器中工作 [英] Flexbox isn't working in android web browser in Android 4.4.2

问题描述

有一个我一直在为我的客户工作的网站，我一直在做移动布局。我决定为整个网站使用flexbox布局，但由于某些奇怪的原因，4.4.2的股票android web浏览器没有加载任何使用flexbox的元素。 Android版Chrome浏览器使用flexbox加载所有元素就好了。我不能确定发生了什么事情，但是任何可以给予的帮助都会很大。如果您使用开发人员工具，我所有的代码都在hoopactivation.x10.mx上。如果需要的话，我也可以在这里发布我的代码，如果有的话（这可能会发生，但我现在不在我的笔记本电脑附近）。方案

我没有任何特定的代码发布，但是我自己也有一些有趣的问题。我在 http：// thatemil上找到了这篇博文。 com / blog / 2013/11/03 / sticky-footers-flexbox-and-ie10 / 对于解释你需要做什么来支持其他浏览器非常有用。我使用flexbox的现代标准，直到我发现它不是在Android上工作，并发现博客帖子，所以希望它会有所帮助。为了记录，这里是我粘滞页脚的CSS：

  / * 
粘滞页脚 -  Flexbox 
 * / 
 
 .flexboxtweener，.flexboxtweener> body {
 height：100％; / * IE 10 * / 
} 
 
 .flexbox {
 body {
 display：-webkit-box; 
 display：-ms-flexbox; 
 display：-webkit-flex; / * Safari * / 
 display：flex; 
 -webkit-box-orient：vertical; 
 -webkit-flex-direction：column; 
 -ms-flex-direction：column; 
 flex-direction：column; 
最小高度：100vh; 
} 
 
 main {
 -webkit-box-flex：1; 
 -ms-flex：1 0 auto; 
 flex：1 0 auto; 
 -webkit-flex：1 0 auto; 
 
 
 $ b $ * 
粘滞页脚 -  w / JS，没有flexbox 
 * / 
 
 html.js .no-flexbox {
 position：relative; 
最低身高：100％; 
 
 footer {
 position：absolute; 
剩下：0; 
 bottom：0; 
宽度：100％; 
 
 
 $ b $ * b $ b粘性页脚 - 无JS，无Flexbox 
 * / 
 
 // x-小
 html.no-js {
 main {
 margin-bottom：508px; 
} 
页脚{
 height：508px; 
 
 
 $ b @media（min-width：@ screen-md-min）{
 .no-js main {
 margin-bottom ：210px; 
} 
 
 .no-js footer {
 height：210px; 
 
 
 
 
 
 
 
这很容易，而且使用一些Bootstrap混合，但希望这有助于！
 
There's this website I've been working on for a client of mine and I've been working on the mobile layout. I decided to use a flexbox layout for the overall website, but for some odd reason, the stock android web browser for 4.4.2 isn't loading any of my elements that are using flexbox. Chrome for Android loads all my elements using flexbox just fine. I can't be too sure of what's happening, but any help that can be given would be great. All my code is on "hoopactivation.x10.mx" if you use the developer tools. If need be, I can also post my code on here if neccesarry (Which will probably happen anyhow. I'm just not near my laptop right now).
解决方案
I don’t have any specific code to post, but I’ve had some interesting issues with flexbox myself. I found the blog post at http://thatemil.com/blog/2013/11/03/sticky-footers-flexbox-and-ie10/ very useful with explaining what you need to do to support other browsers. I was using the "modern" standard of flexbox until I found out it wasn’t working on Android, and found that blog post, so hopefully it’ll help. For the record, here is my CSS for the sticky footer:
 /*
 Sticky Footer - Flexbox
 */

.flexboxtweener, .flexboxtweener>body {
    height: 100%; /* IE 10 */
}

.flexbox {
    body {
        display: -webkit-box;
        display: -ms-flexbox;
        display: -webkit-flex; /* Safari */
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-flex-direction: column;
        -ms-flex-direction: column;
        flex-direction: column;
        min-height: 100vh;
    }

    main {
        -webkit-box-flex: 1;
        -ms-flex: 1 0 auto;
        flex: 1 0 auto;
        -webkit-flex: 1 0 auto;
    }
}

/*
 Sticky Footer - w/ JS, no flexbox
 */

html.js.no-flexbox {
    position: relative;
    min-height: 100%;

    footer {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
    }
}

/*
 Sticky Footer - no JS, no flexbox
 */

// x-small
html.no-js {
    main {
        margin-bottom: 508px;
    }
    footer {
        height: 508px;
    }
}

@media (min-width: @screen-md-min) {
    .no-js main {
        margin-bottom: 210px;
    }

    .no-js footer {
        height: 210px;
    }
}
That’s in LESS and using some Bootstrap mixins, but hopefully that helps!

                        
这篇关于在Android 4.4.2中，Flexbox不能在Android Web浏览器中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！