认识到自己的奇妙能力后display:flex
,我制作了一个网页,在 Windows 上的 Chrome 26 中查看时,该网页看起来完全符合我的要求。但是,它在我的 Android 上的 Chrome 26 中不起作用,在我的模拟器中的 Android 浏览器 4.1 中也不起作用。根据caniuse http://caniuse.com/#search=flex,所有这些浏览器都应该支持它。
也许巧合的是,它在 Android 中的外观(据我所知)与我切换到旧版本时的外观相同display:box
.
Windows 与 Android 的情况如下:
我的问题是,如何防止这些跨设备问题?也许使用 Flex 以外的东西直到它变得更加标准会更好。谁能给我提供一个不使用 flex 的工作示例,或者可以在 Android 上运行的示例?这是针对移动网络应用程序的。任何帮助深表感谢。我的代码的链接如下。
使用-webkit-flex:JSFiddle http://jsfiddle.net/vppdH/
带盒:JSFiddle http://jsfiddle.net/Hv35t/
有 3 个具有不同属性/值的 Flexbox 草稿需要注意。 Caniuse 仅区分支持当前草案(“支持”)的浏览器与支持旧草案(“部分支持”)的浏览器。
为了最大限度地提高浏览器支持,您只需包含从最旧版本到最新版本的所有浏览器即可。
.foo {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
}
.bar {
-webkit-box-flex: 1;
-moz-box-flex: 1;
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
}
虽然所有 Android 版本目前都支持旧的 2009 属性,但将来可能会放弃它们,转而支持标准属性。另请注意,Blackberry 10 被列为支持当前标准,而不是任何旧草案。
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)