iPhoneXの画面適応 WeChatアプリとH5でセーフエリア下部の小さな黒いバー

最近、アプリを書くときにiPhoneXの下部の小さな黒い線がコンテンツに重なる問題に遭遇しましたが、実はこれ、iPhoneXのセーフエリアの適応なんです。

前置き

Apple iPhone X , iPhone XR などでは、物理的なホームボタンが廃止され、ホームボタン機能の代わりに下部に小さな黒いバーが表示されていることが確認できます。WeChatアプレットやh5ページはこの状況に対応する必要があり、そうでない場合、以下のように下部のボタンまたはタブバーが下部の黒い線と重なる状況が発生する可能性があります。

1. 安全地帯とはどういう意味ですか？

コンテンツが小さな黒い線と重なってしまう問題を解決するためには、まずAppleの安全領域の定義を理解する必要があります。

セーフエリア

Appleが公式に発表したこの2つの図を見てください。真ん中の青い部分がセーフエリアであることがわかります。つまり、セーフエリアを適応させるということは、アプレットやH5の内容を青いエリアに表示させるということです。

また、Secure ZoneはIOS 11以降、iPhone X以上で利用できるため、適応が必要なのはこのカテゴリーであり（便宜上、このカテゴリーをiPhone Xと総称）、それ以前の機種は適応を検討する必要はない。

<スパン 2. WeChatアプレットにおけるセキュアエリアの適応

3つの選択肢

• 下部の小さな黒いバーを適応させるために、既知の高さ34px/68rpxを使用します（推奨しません）。
• 公式WeChat APIのsafeAreaオブジェクトのgetSystemInfo()を使用して適応させる(推奨)
• Apple公式のcss関数 env()、constant()を使って適応する（推奨）関数 env()、constant()を使って適応する（推奨）関数

オプション1：下部の小さな黒いバーの高さを34px/68rpxの既知のものを使用して適応する（非推奨）。

これは古い方法で、オプション2や3と比べて推奨されなくなったので、お急ぎの方はこちらを学んでオプション2や3を直接見てください。

iPhoneの下部にあるHome Indicatorの高さが34pxであることはネットで知っていますし、実際に実機で確認しましたので、その値に合わせて下のボタンやタブのmargin-bottom, padding-bottom, heightなどを設定するか、小さな黒いバーの位置を占拠するdivを追加すればいいのです。

これは、現在のモデルがセキュリティゾーンに適応する必要のあるモデルかどうかを判断する必要があるという注意点で行われます。

質問です。現在のモデルが安全な地域に適合させる必要があるものかどうか、どのように判断するのですか？

2つの選択肢

• 使用する wx.getSystemInfoSync() の model 属性は
• を使用します。 wx.getSystemInfoSync() の中に screenHeight と safeArea オブジェクトの bottom 属性があります。

方法1 使用方法 wx.getSystemInfoSync() の model 属性は

既に発売されているセキュリティゾーンを持つApple端末は、iPhone X、iPhone XR、iPhone XS Max、iPhone 11、iPhone 11 Pro、iPhone 11 Pro Maxなどが知られていますので、getSystemInfoSync()メソッドから直接モデルプロパティを取得して判断することができます。また、iPhoneシリーズのWeChatがまだ適応していない場合のMODの戻り値はunknown(iphone)なので、事前に適応を行うことも可能です。

let IPHONE_X = /iphone x/i
let IPHONE_X_11 = /iphone 11/i
let IPHONE_UNKNOWN = /unknown\(iphone\)/i

// Method 1: Use the model to determine if it is an IPhoneX and other phones that contain a secure area
const isIPhoneX = () => {
  let model = wx.getSystemInfoSync().model
  return (model.search(IPHONE_X) > -1 || model.search(IPHONE_X_11) > -1 ||
    model.search(IPHONE_UNKNOWN) > -1)
}

// You can also use regular expressions to determine
const isIPhoneXRegex = () => {
  let model = wx.getSystemInfoSync().model
  return (/iphone\sx/i.test(model)
    || (/iphone/i.test(model) && /unknown/.test(model))
    || /iphone\s11/i.test(model)) 
}

方法2 を使用します。 wx.getSystemInfoSync() の中に screenHeight と safeArea オブジェクトの bottom 属性で指定された

ここでは screenHeight の代わりに windowHeight なぜなら bottom は画面の左上を原点として計算されるので、必要なのは画面の高さであり、それに対して screenHeight と bottom が等しければ適応は不要、等しくなければ適応が必要です。

注意: WeChat Developer Tools のシミュレータを使用する場合、screenHeight と bottom は常に等しいので、実機でテストする必要があります。

// Method 2: Use screenHeight and bottom of safeArea in wx.getSystemInfoSync() to determine
const isIPhoneX = () => {
  let screenHeight = wx.getSystemInfoSync().screenHeight
  let bottom = wx.getSystemInfoSync().safeArea.bottom
  return screenHeight ! == bottom
}

iPhone Xかどうかを見分ける方法という問題が解決したので、いよいよコードを書いていきます。

<view class="bottom-button {{isIpX ? 'view-IPX' : ''}}">bottom-button</view>

オプション2. 公式WeChat API、適応のためのsafeAreaオブジェクトのgetSystemInfo()を使用する(推奨)

wx.getSystemInfo()でsafeAreaオブジェクトを使用し、下部の小さな黒いバーの高さを取得します。

step 1: 上記の方法で、適合させる必要があるのがiPhoneモデルであるかどうかを判断します。
step 2: 適応が必要な機種の場合、safeAreaの底を取得し、screenHeightで底を引いて、小さな黒いバーの高さを取得します。それをlocalstorageに保存すれば、グローバルに利用できるようになります。

オプション3 Apple公式の適応スキームcss関数 env()、constant()を使って適応させる（推奨）

Appleは公式に env() を使用します。 constant() を適応させるためには、この解決策を使用し、値が正確に何であるかを気にしないことをお勧めします。この2つの方法は何ですか？

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

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

ゴールは下部の小さな黒いバーを適応させる必要があるため、単に safe-area-inset-bottom この値です。

そして、env()関数とconstant()関数は、ページが設定する際に使用するために必要な前提条件として viewport-fit=cover WeChatアプレットのパフォーマンスと、実機でテストしたときにこの2つの関数が動作したことから、想定されるのは viewport-fit デフォルトは cover .

注意点としては、IOS11.2以前はconstant()関数が使えたのですが、IOS11.2以降、この関数は非推奨となり、env()関数に置き換わったことです。公式の原文では以下のようになっています。

[...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...] [...]