小規模プログラム開発ユニアプリは、Apple の下部の黒いバーと IOS システムのピットに適応する下部の安全領域を取得します

小規模なプログラムの開発では、Android と Apple の異なるモデルに適応する必要がありますが、この記事では、Apple IOS システムに適応する際に踏む落とし穴について説明します。

1. margin-bottom 属性

画像のボタンなど、ページの下部要素を下部から 50rpx の距離にしたい場合、従来の書き方によれば、margin-bottom:50rpx;Android スマートフォンでは正常に表示され、Apple スマートフォンでは動作しません。システムに付属の白/黒のバーにより、一部のボタンがブロックされます。
解決策:
a. 要素自体に影響を与えない状況では、下からの距離を支えるようにmargin-bottom変更padding-bottomされます (図のボタンは適用されません。ボタンの高さを支えます) b. 追加します
。 button要素に親要素の高さを設定するか、追加した親要素を追加しますpadding-bottom。
ここに画像の説明を挿入

2. Apple 携帯電話は底面から安全な距離を確保します

env(safe-area-inset-bottom)通常、iPhone X 以降のデバイスに適応するために、下部の安全領域の高さを取得するために使用されます。ただし、Android デバイスではenv(safe-area-inset-bottom) 戻り値は 0 であるため、下部の安全領域に収まるように他の手段を使用する必要があります。
iOS デバイスと互換性がある: constant(safe-area-inset-bottom)
iPhone X 以降のデバイスと互換性がある: env(safe-area-inset-bottom) は、
使用時に次の順序で記述できます。

.container {
  padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS 设备 */
  padding-bottom: env(safe-area-inset-bottom); /* 兼容 iPhone X 及以上设备 */
}

下部の安全領域の高さにさらに 50px 追加したい場合は、次のように記述できます。

  padding-bottom: calc(env(safe-area-inset-bottom) + 50px); /* 底部安全区域高度加 50px 的高度 */

3. コンポーネントが全画面で表示されます

たとえば、アプレット内をクリックすると、ポップアップウィンドウが表示されます。ポップアップウィンドウには、全画面表示用の背景マスクが必要です。マスクの幅と高さを 100% に設定しても効果はありません。次のコードに示すように、幅と高さを vw と vh に設定する必要があります。

.container {
  width:100vw;
  height:100vh;
}

ここに画像の説明を挿入
お役に立てましたら、忘れずにトリプルリンクをクリックしてください