This is the first day of my participation in Gwen Challenge

1. Adaptation

NavigationBar, TabBar, and the bottom button at the bottom of the page (developed using official components, no need to adapt). According to Apple’s official documentation, the height of the status Bar at the top of the iPhone X is 44pt, and the height of the operation Bar at the bottom is 34pt. (The default height of the Bar in some systems may change on devices, so you are advised to use the official website.)

2. Recommended official documents

The official address

Opendocs.alipay.com/support/01r…

methods

  1. In global store.ts, global data adds an adaptation identifier isIPhoneX
state: {
  // is it an iphoneX or higher
  isIPhoneX: false,}Copy the code
  1. In the global store.ts, obtain device information through my.getSystemInfo, identify the iPhone device type, and save the adaptation identifier isIPhoneX
let cachedSystemInfoPromise: Promise<my.SystemInfo>;

/** ** getSystemInfo with cache * do not use sync getSystemInfoSync ** * No catch, null is returned ** * default 500ms timeout, null* / is returned
getSystemInfo({ timeout = 500} = {}) :Promise<my.SystemInfo> {
  if (cachedSystemInfoPromise) {
    return cachedSystemInfoPromise;
  }

  return cachedSystemInfoPromise = new Promise(resolve= > {
    setTimeout(() = > {
      resolve(null);
    }, timeout);

    my.getSystemInfo({
      success(res: my.SystemInfo) {
        resolve(res);
      },

      fail(error) {
        console.error('getSystemInfo failed, null will be resolved', error);
        resolve(null); }}); }); }async getSystemInfo({ commit }) {
  const systemInfo = await getSystemInfo();
  const { model = ' ' } = systemInfo || {};
  const iPhoneXSeries = [ 'iPhone10, 3'.'iPhone10, 6'.'iPhone11, 2'.'iPhone11, 4'.'iPhone11, 6'.'iPhone11, 8'.'iPhone12, 1'.'iPhone12, 3'.'iPhone12, 5'.'iPhone13, 2' ];

  if (iPhoneXSeries.includes(model)) {
    commit('setState', {
      isIPhoneX: true}); }},Copy the code
  1. In app.ts, invoke the adaptation logic in onLaunch
onLaunch(options: IOptions) {
  // Obtain device information
  this.dispatch('getSystemInfo');
}
Copy the code
  1. Set adaptation styles in global app.less
.isIphoneX {
  padding-bottom: 68rpx ! important;
}
Copy the code
  1. In a page or component, you can dynamically add an adaptation style by determining the global adaptation identifier

ts:

getters: {
   isIphoneX: ({ global }) = > (global? .isIPhoneX ||false),}Copy the code

axml:

<view class="container-footer {{ isIphoneX ? 'isIphoneX' : '' }}">At the bottom of the</view>
Copy the code

Characteristics of the

Involves JS, CSS judgment, cumbersome, code amount

3. Apple’s official recommendation

The official address

Designing Websites for iPhone safe Area The core content should be in the Safe area to ensure that it is not obscured by device corners, sensor housing, and the small black Home Indicator.

Env () and constant() are new features in IOS11. They are Webkit CSS functions, which are used to set the distance between security zones and boundaries. The value is 0px safe-area-inset-right: indicates the distance between the security zone and the left edge. The value is 0px safe-area-inset-top: Safe-area-inset-bottom: The distance between the safe zone and the top boundary, 44px vertically, 34px vertically Env () and constant() require that viewport-fit=cover be set to H5. The default value of viewport-fit is cover.

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>
Copy the code

methods

CSS adapter:

page {
  height: calc(96rpx+ constant(safe-area-inset-bottom)); / / compatible with IOS <11.2
  height: calc(96rpx + env(safe-area-inset-bottom)); / / compatible with IOS >11.2
  padding-bottom: constant(safe-area-inset-bottom); / / compatible with IOS <11.2
  padding-bottom: env(safe-area-inset-bottom); / / compatible with IOS >11.2} // constant() and env() need to exist at the same time, and the order cannot be changedCopy the code
  • Safe-area-inset-bottom uses the unit of PX, but calc will automatically process the relationship between the units of RPX and PX, and convert them to a unified RPX unit.
  • The reason why constant and env are specified is that after ios11.2, constant is deprecated and env takes effect. Constant is compatible with all ios versions officially deprecated since 11.2.

Min, Max, calc, and @supports

Compatibility between horizontal and vertical screens: The safe-area-inset-bottom object may be inconsistent between the horizontal and vertical screens of the device. In this case, the value may be incorrect. Solution 1 (recommended) :

@supports(padding: max(0px)) {
    .post {
        padding-bottom: max(12px, env(safe-area-inset-bottom)); }}Copy the code

In the example above: when the device is in portrait mode, safe-area-inset-bottom is generally greater than 12px, so safe-area-inset-bottom; Safe-area-inset-bottom is 0 for landscape, and the default 12px is used to ensure that the bottom of the page is not too close to the edges. @supports is used because Max is not necessarily supported everywhere. The two functions, min and Max, can be used inside calc(), can be nested within each other, and can also be used inside calc(). Solution 2: You can also use calc() with or without safe-area-inset-bottom and set the default value to 12px. As follows:

.post {
    padding-bottom: calc(12px(Default) +env(safe-area-inset-bottom));
}
Copy the code

@support MDN Documentation: developer.mozilla.org/zh-CN/docs/… The @Supports NOT in CSS can be used on vintage devices (iPhone SE 1 gen, IOS 10.3) that do not support constant

.post {
  padding-bottom: calc(constant(safe-area-inset-bottom) + 150rpx);
  padding-bottom: calc(env(safe-area-inset-bottom) + 150rpx);
}
/* not indicates that the attribute */ in parentheses is not supported
@supports not(constant(safe-area-inset-bottom)){
  .post {
    padding-bottom: 150rpx; }}Copy the code

Characteristics of the

You can use only CSS codes to achieve compatibility between Android and iPhone models, and support compatibility between horizontal and vertical screens. Recommended