iPhoneXをクライアントH5ページに適応させる方法のチュートリアル

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

iPhone以来

1. トップバー

以前のクライアントは常にステータス バーに 20 ポイント + ナビゲーション バーに 44 ポイントの方法を使用していました。 iPhone以来

2. 下部操作バー

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

3. 適応方法

結論として、iphoneX の現在の固有の携帯電話パラメータに基づいて、採用できる適応方法は次のとおりです。

(1)メタタグ

iPhoneに適応させるには

<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):calc(30px(想定値) + constant(safe- area-inset-bottom)); //実際の状況に応じて適応方法を選択します}}

2.iphoneXの固有モデルパラメータを使用する

@media のみの画面と (device-width: 375px) と (device-height:812px) と (-webkit-device-pixel-ratio:3) { #buy { padding-bottom:34px;

(3) js判定（以下Jqueryを使用）

 if($(window).width() === 375 && $(window).height() === 724 && window.devicePixelRatio === 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 ページが rem 方式のスケーリングを採用している場合、1pt = 1px * 3 (iphoneX の解像度) となります。

以上がこの記事の内容です。この記事の内容が皆様の学習や仕事の参考になれば幸いです。ご質問がございましたら、VeVb Wulin へのサポートに感謝いたします。ネットワーク。