iPhoneXがクライアントH5に適応する問題について ページ

この記事は主に iPhoneX 適応クライアント H5 ページに関する関連情報を紹介します。記事内の紹介は非常に詳細であり、皆さんの学習や仕事に一定の参考学習価値があります。必要な方は一緒に学習してください。

はじめに

現在、多くのAPPデザイナーがH5フロントエンド開発に目を向け始めていますが、すべてのiPhoneおよびAndroidモデルの適応問題を解決することが私たちの最優先事項です。 APP を設計している場合でも、フロントエンド H5 を作成している場合でも、モバイル互換性を考慮する必要があります。

iPhone以来、ステータスバー20pt+ナビゲーションバー44ptという方法をずっと使ってきました。 iPhone以来

2.下部操作バー

iPhone以来このとき、空白の安全領域を下部に残す必要があり、ページ コンテンツの最後の最後の行は携帯電話の隅にある必要があります。この安全領域の高さは 34pt です。

3. 適応方法

前述のように、iphoneX の現在の固有の携帯電話パラメータに基づいて使用できる適応方法は次のとおりです:

(1) メタ タグ

ios11 の既存のビューポート メタに適応するためiphoneX 新しい機能が viewport-fit タグに追加されました。クライアントが全画面表示に対応せず、ページを全画面でカバーしたい場合は、この機能を使用できます:

<meta name="viewport" content="width=device-width,viewport-fit=cover">

(2) メディア クエリ

1. 定数関数を使用する

のみ viewport-fit=cover が設定されている場合のみ、定数関数を使用できます

@supports(bottom:constant(safe-area-inset-bottom)) {
    selector{
        padding-bottom:constant(safe-area-inset-bottom); 
        padding-bottom:calc(30px(假设值) + constant(safe-area-inset-bottom)); //根据实际情况选择适配方法
    }
}

2. iphoneX の独自のモデルパラメータを使用します

(3) js 判定 (Jquery を使用します)以下)

@media only screen and (device-width: 375px) and (device-height:812px) and (-webkit-device-pixel-ratio:3) {
    #buy {
        padding-bottom:34px; 
    }
}

(4) クライアント プロトコル

に基づくこともできます。 クライアント プロトコルは、クライアントとの一貫性を維持するために、クライアントに iphoneX であるかどうかを問い合わせるよう要求します。

4. パラメータの説明

上記のコードのパラメータは次のように説明されます:

safe-area-inset-bottom — 安全領域と境界線の間の距離を設定するために使用される ios11 の新機能

• 375 — iphoneX デバイスの幅

• 812 — iphoneX デバイスの高さ

• 3 — iphoneX デバイスの解像度

• 724 — iphoneX デバイスの高さ (812) - トップバーの高さ (88) 34 — 下部安全領域の高さ

• 上記のパラメータは、標準の 1pt=1px に基づいて計算されます。H5 ページがズームレム方式を採用している場合、1pt = 1px * 3 (iphoneX の解像度) になります

• 上記はこの記事の内容全体が皆さんの学習に役立つことを願っています。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。

関連する推奨事項:

Android を使用して WeChat を模倣し、H5 ページのプログレスバーをロードする

CSS を使用して ios7 を模倣するスイッチボタンを実装する

以上がiPhoneXがクライアントH5に適応する問題について ページの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。