我没有任何特定的代码发布,但是我自己也有一些有趣的问题。我在对于解释你需要做什么来支持其他浏览器非常有用。我使用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浏览器中工作的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!
07-18 08:49