web-dev-qa-db-ja.com

モバイルとタブレットの共通の次元でテーブルを表示する最良の方法

私の意見ではvisual問題が発生しますsabilityを壊します。

TwitterのBootstrap V.3を使用しており、Webフォームがあります。

私はこの情報を表に示さなければなりません:

市、住所、緯度、経度、テキストフィールド、電話

Telsは値よりも大きくすることができ(私のJavaScriptがそれを管理します)、TextFieldは通常約85の文字数を持ちます(より多くても、少なくても構いません)...

(デスクトップビューで)上下に行を追加することは視覚的に許容されますが、スマートフォンやタブレットでは本当に悪いです。

これを達成するための最良の方法は何ですか?

2
alessadro

以下のいくつかの例を参照してください。モバイルコンテキストでのテーブルプレゼンテーションへのさまざまなアプローチ。

  1. 一番上はモバイルビューのスワイプ可能な列を表します。
  2. 2番目の画面は、数列から1列へのアプローチを指します。
  3. 例nr 2と組み合わせると役立つ、折りたたみ/展開可能なメニューの例の3つ目。

Wikipedia、Atlassian Confluanceなどに触発されました。

Atlassian Confluance - Swipeable columns

Nested columns

Wikipedia - Collapsable / Expandable

2
Phil Mobile