iPhoneのノッチ画面 上部に固定した場合、ページを上下にスライドさせると大きな隙間ができますが、背景が真っ白であれば大丈夫ですが、そうでないと壊れているように見えて非常に見苦しいです。 。
iPhoneの画面サイズ
iPhoneXと他のモデルのサイズの違い
上記の問題の理由は、iPhoneX には安全領域があり、安全領域内の内容はコーナー、センサーハウジング、ホームインジケーターの影響を受けません (下図の青い領域)。 :
言い換えれば、うまく適応したい場合は、ページの表示および操作可能な領域が安全領域内にあることを確認する必要があります。
具体的な寸法については、ヒューマン インターフェイス ガイドライン – iPhoneX を参照してください。
どのように適応すればよいでしょうか？最初のステップは、ビジュアル ウィンドウで Web ページのレイアウトを設定することです。
<meta name=viewport content=width=device-width, viewport-fit=cover>
iOS11 の新機能。iPhoneX に適応するために、Apple は既存のビューポート メタ タグを拡張して、ビジュアル ウィンドウ内の Web ページのレイアウトを設定できます。
注: デフォルトで拡張機能を追加しない Web ページは viewport-fit=contain です。iPhoneX に適合させる必要がある場合、これは適合させるための重要な手順です。詳細については、「ビューポートフィット記述子」を参照してください。
2 番目のステップでは、ページのメイン コンテンツが安全な領域に制限されます。
.post { パディング: 12px; パディング左: env(セーフエリアインセット左); パディング左: const(セーフエリアインセット左); ); パディング右: const(安全領域挿入右);}定数関数iOS11 の新機能である Webkit の CSS 機能を使用して、安全領域と境界の間の距離を設定します。 事前定義された変数は次の 4 つです。
注: 一部のブラウザでは constant 関数がサポートされなくなり、代わりに env 関数が使用されます。
デフォルトでは、クライアントがセキュリティ ゾーンを処理する場合、その効果は次のようになります。
全画面表示の viewport-fit=cover 属性を使用した後:
安全エリアマップ:
安全領域を制限した後のレンダリング:
方向が回転されている場合、パディングは 12 ピクセル上に設定されます。
3 番目のステップは、min() メソッドと max() メソッドを使用することです。
@supports(パディング: max(0px)) { .post { パディング左: max(12px, env(セーフエリアインセット左)); パディング右: max(12px, env(セーフエリアインセット-右））; }} 修正された要素の問題が修正されました
ページ タイトルがフロントエンドに実装され、上部に固定されている場合、この時点で、上部の値を安全な距離の値に設定できます。たとえば、次のようになります。
.header{top:env(セーフエリアインセットトップ);トップ:const(セーフエリアインセットトップ);}参考記事：iPhone X向けWebサイトのデザイン
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。