android 2.x - 4.3.x phonegap不支持flexbox css3

时间:2014-10-30 22:56:15

标签: javascript android css3 flexbox

我正在使用phonegap进行开发和应用。我想在我的playfield中使用flexbox,但我有这个问题:

Chrome,Mozilla,android 4.4 - http://i.stack.imgur.com/1aunA.jpg

android - 2.x - 4.3.x - http://i.stack.imgur.com/yqIf0.jpg

  playfield {
  width: 408px;
  height: 408px;
  margin: 0px;
  padding: 0px;
  margin-left: auto;
  margin-right: auto;
  display: -webkit-box;
  display: -moz-box;
  display: -o-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-pack: space-around;
  -moz-box-pack: space-around;
  -ms-flex-pack: space-around;
  -webkit-justify-content: space-around;
  justify-content: space-around;
}

playitem {
  width: 100px;
  height: 100px;
  margin: 0px;
  padding: 0px;
  background-color: #EEEEEE;
  border-collapse: 
  -webkit-flex-shrink: 0;
  -moz-flex-shrink: 0;
  -o-flex-shrink: 0;
  -ms-flex-shrink: 0;
  flex-shrink: 0;
  -webkit-flex-grow: 0;
  -moz-flex-grow: 0;
  -o-flex-grow: 0;
  -ms-flex-grow: 0;
  flex-grow: 0;
  line-height: 100px;
  text-align: center;
  color: #EEEEEE;
}

请帮我解决这个问题;(

1 个答案:

答案 0 :(得分:3)

支持现代原生移动浏览器

您现在可以在大多数原生移动浏览器上使用现代的flexbox语法,这意味着它也可以在phonegap视图中使用。

较旧的原生移动浏览器

在Android 4.1,4.3,Safari 5.1上您可以使用old flexbox,在IE10中使用2012 syntax

Automagic solution

如果您想自动自动设置前缀和旧/ 2012语法,可以使用autoprefixer

如果您使用gruntgulp,则可以自动为工作流程添加前缀。