まずはiPhone Xのモデルを見てみましょう
上の図では、Iphonex モデルには頭と底に 2 つの新しい領域があるため、Web アプリの表示を容易にするために、このタイプのモデルにいくつかの調整を加える必要があります。
h5 で作られたモバイルページの一般的なレイアウトは、頭 + 胴体 + 下の 3 列モードです。頭と上部は固定され、胴体のコンテンツはスクロール可能です。
<div class=page> <header></header> <main></main> <footer></footer> </div>
ただし、iPhone の新しい CSS 属性を使用しない場合、この状況では、下部のナビゲーション バーが Iphone に付属のブリージング ライトによってブロックされます。いくつかの解決策を確認しました。
vue フレームワークを使用しています。index.html ページに以下を追加する必要があります。
<meta name=viewport content=width=device-width,viewport-fit=cover>
次に、パブリック app.vue ページで、各コンポーネントの表示が router-view に置き換えられるため、ここでパブリック ヘッダー バーを処理できるようになります。具体的なレイアウトは次のとおりです。
<template><div id=app><div class=placeholder_top :style={position:fixpositiona?'absolute':'fixed'}></div><router-view class=routerview></router-view>< /div></テンプレート>上記のレイアウトでは、placeholder_top クラスの div に対して次のように記述します。
.placeholder_top { 位置: 固定; 左: 0; 背景色: #303030; ); z インデックス: 999;}この場合、将来的には個別のコンポーネントのトップバーの問題に対処する必要がなくなります。次に、前述のヘッダーの問題に対処できるようになります。一般に、ヘッダーのほとんどはパブリック コンポーネントにカプセル化されます。ここで、app.vueページに挿入した要素の影響で、headコンポーネントのCSSの書き方も少し変更する必要があります。
<template><header> <div class=title :style={position:fixposition?'absolute':'fixed'}> ナビゲーションコンテンツ</div> <div class=placeholder></div> </header></テンプレート>ページのCSSは次のとおりです。
ヘッダー{背景色: #303030; 位置: 固定; トップ: 定数(セーフエリアインセットトップ);高さ: 88px; z-index: 999; } .placeholder{ 高さ: 88px; }}このように書くと、ヘッド ナビゲーション バーは携帯電話のステータス バーの下に配置され、ウィンドウには影響せず、Android および iOS モデルと互換性があります (このような互換性の問題には iOS システムの問題も関係しますが、この記事はまだ関与した）
次に、メイン領域の処理を見てみましょう。上記のヘッダーコンポーネントが処理されているため、メインのレイアウトは次のようになります。
main {padding-top: constant(safe-area-inset-top);padding-top: env(safe-area-inset-top);padding-bottom: calc(88px + constant(safe-area-inset-bottom) );padding-bottom: calc(88px + env(safe-area-inset-bottom));ps: ここで説明します。次の 2 行は、現在のページに下部ナビゲーション バーがない場合に使用されます。
パディングボトム: 定数(セーフエリアインセットボトム);パディングボトム: env(セーフエリアインセットボトム);},
メインのレイアウトが完成したので、コンテンツを直接書き込むだけです。
次に、下部のフッターレイアウトを見てください。
<template><footer> <div class=foot :style={position:fixposition?'absolute':'fixed'}> 下部コンテンツ</div></footer></template>下部コンテンツのCSSは以下の通りです。
フッター{ 位置: 固定; 左: 0; 幅: 10rem; 高さ: calc(88px + 安全領域インセット-底)); 背景色: #303030; 位置: 絶対; 幅: 10; 88ピクセル; }}このように記述すると、下部ナビゲーション フットのコンテンツは、携帯電話に付属の呼吸用ライトによってブロックされなくなります。
したがって、この種の Web アプリの適応に使用する必要がある CSS の記述方法は次のように要約できます。
位置: 固定; 上: 定数(セーフエリアインセットトップ); 下: 定数(セーフエリアインセット-ボトム); -inset-bottom); 上: calc(1rem + constant(safe-area-inset-top)); 上: calc(1rem + env(safe-area-inset-top)); calc(1rem + constant(safe-area-inset-bottom)); 底部: calc(1rem + env(safe-area-inset-bottom));
ps: 上記の記述では、style={position:fixposition?'absolute':'fixed'} と記述されています。これは、ユーザーが入力ボックスをクリックしたときにそのような固定要素の位置が不正確になる問題を解決するためです。ソフト キーボードが表示されます。興味がある場合は、この記事では説明しません。
ここでは、実際のニーズに応じてさまざまな記述方法を使用できます。また、実機のテストやスタイルの問題がある場合には、一般的なレイアウト ロジックから大きく逸脱しないようにすることをお勧めします。レイアウトの互換性による問題が見つかった場合は、実機デバッグを使用できます。その方法は、PC ブラウザを使用して Web アプリをデバッグし、要素を確認することです。これにより、実機デバッグに関するほとんどのスタイルの問題が解決されます。次回。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。