モバイル端末の優雅なレイアウトの実践

前言:移動端には非常に多くの穴があり、レイアウトが先頭に立っています.
背景
モバイル端末のアプリケーションには様々な複雑なページのニーズがあり、単画面、多画面、固定ヘッドや下部などの複数のシーンを解決するだけでなく、iosとAndroidコアを互換化し、プロジェクトの実戦(携帯電話モードの開き)を経験した後、いくつかの経験をまとめ、ここで大家と共有します.
この文章は→Next軽量級フレームワークと主流ツールの統合に基づく最新のコードここで→next-mobile-complete-demo
心の道程.
まず,実装が必要なトップページはappアプリケーションと類似している.

第一局:flexレイアウトを統一したピット
→flexチュートリアル
トップページは上の画像のように、怠け者で、antd-mobileのtabラベルバーを直接使って、容器の高さを指定する必要があります.そこで、プロジェクトの最初にjsでコンテナをブラウザhtmlウィンドウの高さに直接設定:

// html   = body   =      
doc.body.style.height = docEl.clientHeight + 'px';

縦方向のレイアウトが便利で、tabラベルバー、tabラベルページ、ヘッダ固定要素、または下部固定要素にかかわらず簡単です.要素の中央揃え、両端揃え、自動割り当て空間などを簡単に実現できます.Android入力ボックスによる従来のレイアウトの問題も回避されます.
しかし、ここに唯一悪いところはiosの前進と帰還を互換できない操作欄と上下スクロールリバウンドです.

スクロール時に戻る操作欄を隠すことができず、

.

は、上下にスクロールするとページのバウンド効果がトリガーされやすく、スクロールカートンをもたらします.

ここで補足します:ios上で正常なストリームでレイアウトして、内容が一定の高さを超えると、下にスクロールすると底の前進戻り欄が隠され、上にスクロールするときに表示されます.下部または上部をスクロールしてページを引き続けると、バウンド効果があります.
この2つの問題はiosのユーザー体験を大きく低下させ、プロジェクトの間隔にぴったりで、大きな時間があり、レイアウトの最適化に押された.

第2局:良好なユーザー体験を探すレイアウトケース

ここでは、探している間に、代表的な2つのモバイルエンドアプリケーションを発見しました.

bilibiliのmステーション、テンセントニュースは伝統的なストリームレイアウトを使っており、頭部と底部fixedが固定されており、すべての内容が下に平らになっています.

花弁網H 5主容器のposition属性をabsoluteに設定して文書ストリームから離れる形式を採用している.

この2つのレイアウト方式はios上でユーザー体験が素晴らしい.しかし同時に、ログインページが画面に足りないのに、スクロールしているなどの問題も発見されました.iPhone X対応のセキュリティドメインがありません.弾窓が転がって貫通するなど.
この2つのレイアウトとflexを統合し、それぞれの利点を集約すれば、基本的にユーザー体験と互換性に満足できるモバイルエンドアプリケーションを構築することができます.
では、既存のflexレイアウトに基づいてこの2つのレイアウトを統合する方法が問題になります.

第3局:flexに基づいてレイアウト構造

を調整する
調整する前に、外層の高さ制限を取り除き、縦flexレイアウト(ごく少数の単画面ページを除く)を取り除き、上部、下部固定、弾窓をfixedに設定することを予想していました.
少数の単一画面ページがhtmlウィンドウの高さを継承する必要があることを考慮して,メインコンテナがドキュメントストリームから離れる方式を採用した.
調整後のdom構造は次のとおりです.

html > body > div#root > div.main-content(position: absolute)

main-contentにheight: 100%を加えるだけで、単画面ページのニーズを満たすことができます.
いいことはたくさんある.
上の考えに従って改造した後、新しい問題を発見しました:ドキュメントを離れて流れた後、ページを切り替えて、htmlは最後にスクロールする位置を維持します.

第4局:スクロールバー位置、スクロールスルー、互換iPhone X

スクロールバーの位置が記録されている可能性がある問題を探してみると、historyにはscrollRestorationの属性があり、2つの値があり、1つはデフォルト値auto、もう1つはmanualです.manualに設定すれば手動でスクロール位置を設定できます.

if ('scrollRestoration' in history) {
  history.scrollRestoration = 'manual';
}

は、次いで、経路切替後にスクロール位置を開始位置に設定する.

Router.events.on('routeChangeComplete', () => {
document.scrollingElement.scrollTop = 0;
});

は、ページ切替のたびに初期位置から開始する.
開発で出会った問題は,このdemoには現れなかった.ここには少し鶏の肋骨があり、前進後退しても転がり位置は記録されません.記録スクロールの位置を前進後退させる必要がある場合、このようなドキュメントフローから離れた形式ではなく、bodyスクロールの形式、すなわち.

は、転がり貫通という問題を解決するために、転がりのある弾窓と転がりのない弾窓に対して単独で処理する必要がある.

スクロールのないポップアップに対して、ポップアップ時にtouchmoveイベントを無効にし、非表示時にイベントリスニングを削除します.

は転がる弾窓があり、ページの転がる容器設置overflow:hidden

を見つける必要がある.

互換iPhone Xはmetaラベルの後にviewport-fit=cover

を増やして安全域距離

padding-bottom: 0.49rem; //   button   
padding-bottom: calc(0.49rem + constant(safe-area-inset-bottom));
padding-bottom: calc(0.49rem + env(safe-area-inset-bottom));

を残すここで注意しなければならないpadding-bottomの時に3つ書く必要があります.1つ目はAndroidを互換するためです.

まとめ
総じてflexレイアウトは非常に便利で、特に中央に位置し、適切に配置することができるなどの古い問題を根治することができます.
各レイアウトの方式には一定の欠陥があり、これまで移動端の様々な複雑なシーンを解決する万能な方案はなかった.やはり自分のニーズに合わせてどの実現方法を使うかを選ぶ必要があります.
*上記の3つのシナリオのそれぞれの欠点:
縦flexレイアウト(使用不可)
body流式舗装(従来)
absoluteドキュメントフローから離脱(使用中)
ios前進後退の操作バーを隠すことができず、リバウンド効果でカートンを引き起こす
内部コンテナはhtmlウィンドウの高さを継承できません
ルーティングジャンプでスクロールバーが記録される可能性があります