モバイルUIでフォーラムページングをより快適な方法で表示するにはどうすればよいですか？
フォーラムのページ番号を快適に表示する方法を見つけようとして問題が発生しています。下の写真を見てください：
画像が示すように、ページ番号はNew Threadボタンの右側に表示されます。表示されるページごとに非常にさまざまな数のページ番号アイテム（約12から20を超える範囲）があり、図からわかるように、非常に少量（この場合は14）がすでに行をオーバーフローして表示されていますそれほど楽しい方法ではありません。
表示されているアイテムを放棄することなく、柔軟でアクセスしやすく視覚的に快適な方法でこれらを表示する方法を探しています。
このインターフェースの開発では、元の（デスクトップ）インターフェースのCSSのみを編集してモバイル環境に適合させることができるという制約を受けます。既存の要素を追加または削除したり、フローを変更したりすることはできません。
どうすればこれを改善できますか？
どうしたの：
[最初] [前] ... [4] [5] ... [6] [次] [最後]
これは、ページング用のスペースが少ない状況で一般的に使用されています。
に従って：
私は、元の（デスクトップ）インターフェースのCSSを編集して、モバイル環境に適合させることしかできません。既存の要素を追加または削除することはできません
Css（display:none）を使用し、ビューポートのサイズに応じて メディアクエリ を使用します。
上のスクリーンショットを見ると、モバイルサイトには混雑しているように見えます。 UIを再検討することをお勧めします。最も重要なことは何ですか？それがそれほど重要でない場合は、携帯電話に表示したり、別の画面に移動したりしないでください。クリック可能な要素を指で押すのに十分な大きさにしてください。
ユーザーがスクロールしても成長し続ける動的にロードするリストを検討しましたか？
または、ページナビゲーションを削除することを検討してください。ユーザーが表示しているページをユーザーに示してから、下部/上部に次のページナビゲーションを提供しますか？
Naoiseによって提示された解決策は理にかなっているようです。これは、より伝統的なフォーラム/スレッドナビゲーションに慣れている人々にはおなじみでしょう。小さな画面のデバイスでの実装には、慎重な検討が必要です。メディアクエリを使用して述べたように、CSSにはかなりの柔軟性が必要です。
問題は、最初に思われたよりもはるかに困難です。このフォーラムのメーカーは、サイトのモバイルバージョンがデスクトップビューの単なる小さなバージョンではないことを明確に理解していませんでした。
CSSのみを変更できるため、レイアウトをよりユーザーフレンドリーにするために、display:noneをたくさん使用する必要があります。私が提案した変更（ページの上から下へ）：
- 設定用のレンチアイコンを非表示にします（モバイルではそれほど重要ではありません）。
- エンベロープの周囲にパディングを追加して、クリック可能な領域を増やします。
- 「一般的なディスカッション」を左に移動して、残りのコンテンツと揃え、その上のマージンを増やして間隔を均等にします。
Ticker - Event Log - Popular ...の一部のリンクは、モバイルアクセスではあまり重要ではない可能性があるため、非表示にします。- ページ区切りを新しい行に移動するには、
clear:bothをNew Threadに追加します。 - 各ページ番号ボタンに特別なIDまたは異なるクラスがあるかどうかを確認し、それらのいくつかを非表示にします。
- スレッドOPに特別なクラスがある場合は、それを非表示にします。追加の行が追加され、値は追加されません。
DOMとバックエンドコードにアクセスすることになった場合は、さらにいくつかの変更を行う必要があります。
- 下のモックアップにあるように、ページネーションシステムをドロップダウンに置き換えます。
- スレッドリストの上のヘッダー行を削除し、リストを変更して読みやすくし、次のように2行だけになるようにします。
MSペイントアドベンチャーv11（167件の新しい投稿）
理由なしの最終投稿者（3分前）
モバイルの場合は、表示されるアイテムの数を増やし（テキストが「大きい」ものではない場合）、ページネーションをダンプします。次/前のボタンを用意し、ボタンの周囲に十分な距離を置いて、誤ってクリックしないようにします。ユーザーは本当に最初のページまたは2番目のページを通過しますか、ほとんどは通過しません。アイテムの注文方法は？