android 2.x-4.3.x phonegap没有't支持flexbox css3

android 2.x - 4.3.x phonegap doesn't support flexbox css3

本文关键字:支持 css3 flexbox 没有 x-4 phonegap android      更新时间:2023-09-26

我正在用phonegap开发和应用程序。我想在我的游戏场上使用flexbox,但我有这个问题:

Chrome,Mozilla,安卓4.4-https://i.stack.imgur.com/1aunA.jpg

android-2.x-4.3.x-https://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;
}

请帮我解决这个问题;(

支持现代原生移动浏览器

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

较旧的本地移动浏览器

在Android 4.1、4.3、Safari 5.1上,您可以使用旧的flexbox和IE10中的2012语法。

Automagic解决方案

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

如果你使用grunt或gullow,你可以自动为你的工作流程添加前缀。