9

の素晴らしい機能に気づいた後display:flex、Windows の Chrome 26 から見たときの見た目とまったく同じ Web ページを作成しました。ただし、Android の Chrome 26 では機能せず、エミュレーターの Android ブラウザー 4.1 でも機能しません。caniuseによると、これらのブラウザはすべてサポートされているはずです。

偶然かもしれませんが、Android での見た目は (私が知る限り) 古いバージョンに切り替えたときと同じように見えdisplay:boxます。

Windows と Android では次のようになります。

窓対アンドロイド

私の質問は、これらのクロスデバイスの問題を防ぐにはどうすればよいですか? おそらく、より標準的になるまでフレックス以外のものを使用する方がよいでしょう。フレックスを使用しない、または Android で動作する実際の例を誰かに教えてもらえますか? これはモバイル Web アプリ用です。どんな助けでも大歓迎です。私のコードへのリンクは以下のとおりです。

-webkit-flex を使用: JSFiddle

箱付き：JSFiddle

4

2 に答える 2

9

注意すべき異なるプロパティ/値を持つ 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 は、古いドラフトではなく、現在の標準をサポートするものとしてリストされていることに注意してください。

于 2013-05-16T19:25:59.007 に答える
1

好奇心旺盛な人のために、flex を使用しないようにコードを完全に書き直しました。これは、私の目的には問題なく機能する JSFiddle へのリンクです。http://jsfiddle.net/8juSk/

@cimmanon の提案に従ってboxandを使用します。box-ordinal-group

于 2013-05-20T14:46:11.563 に答える