iphoneXの前髪スクリーンに合わせたHtml5の簡易実装

iphonex前髪画面は格好良い言及しないが、それは開発にいくつかの問題を引き起こし、いくつかのPMは、製品がフルスクリーンで表示することができますので、クライアントがフロントエンド処理のための前髪の上のスペースを解放することを願って、その結果、問題がページの頭が上部に固定されているときに、あなたがページを上下にスライドすると、大きなギャップを持っているでしょう、背景が層のように、障害で、それ以外は大丈夫白です場合です。見づらいですね。

iphone Xと他機種の大きさの違いについて

上記の問題の原因は、iphone Xにセーフエリアが存在することです。セーフエリアとは、下の青い部分に示すように、角丸（コーナー）、フラッシュバン（センサーハウジング）、小さな黒いバー（ホームインジケーター）によって内容が影響を受けない可視ウィンドウの範囲のことを指します。

つまり、適応するための良い仕事をするためには、ページの見える部分、行動できる部分が安全圏内にあることを確認する必要があるのです。

具体的な寸法については ヒューマンインターフェースガイドライン - iPhoneX

どのように適応すればよいのですか？

まず最初に、表示可能なウィンドウにページのレイアウトを設定します

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

iOS11の新機能で、AppleがiPhoneX向けに従来から提供しているviewport metaタグを拡張したもので、可視ウィンドウでのWebページのレイアウト方法を3つの値で設定します。

• を含む。ビューポートウィンドウにページのコンテンツが完全に含まれる（左画像）
• cover: ページのコンテンツが表示可能なウィンドウを完全に覆っている (右)
• auto: デフォルト値、contain と同じ

注：拡張機能を持たないウェブページのデフォルトのパフォーマンスはviewport-fit=containです。iPhoneXを適応させるには、viewport-fit=coverを設定する必要があります。
詳しくは、こちらをご覧ください。 ビューポート適合性記述子

第二段階は、ページの本文を安全な領域に閉じ込めることです

.post {
    padding: 12px;
    padding-left: env(safe-area-inset-left);
    padding-left: const(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
    padding-right: const(safe-area-inset-right);
}

定数関数

iOS11の新機能である、セーフエリアとボーダーの距離を設定するWebkit用のCSS関数で、4つの定義済み変数が用意されています。

• safe-area-inset-left: セーフエリアと左ボーダーの距離
• safe-area-inset-right: 右の境界線からの安全領域の距離
• safe-area-inset-top: 上部境界線からの安全領域の距離
• safe-area-inset-bottom: 下部の境界線からの安全領域の距離

注：一部のブラウザでは定数関数がサポートされなくなりましたので、代わりにenv関数を使用してください。

デフォルトでは、クライアントが安全な領域を処理する場合、以下のような効果があります。

フルスクリーンviewport-fit=cover属性使用後。

安全エリアマップ。

セーフティゾーンを限定した後の効果。

上記は、向きを回転させた後に、パディングを12ピクセルに設定しています。

ステップ3、min()メソッドとmax()メソッドを使用する場合

@supports(padding: max(0px)) {
    .post {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
    }
}

要素固定の不具合を修正

ページタイトルがフロントエンドで実装され、上部に固定されている場合、見えなくなってしまうので、その時は上部の値を安全な距離の値に設定するなどします。

.header{top:env(safe-area-inset-top);top:const(safe-area-inset-top);}

参考記事 iPhone Xのためのウェブサイトデザイン

以上、本記事では、スクリプトハウスの学習と応援に役立てていただければと思います。