非你网

微信、百度小程序都支持常量 env，来自适应有圆弧屏幕的手机。头条小程序却不可以（抖音开发者官网也没有，只手搜适配，自适应等关键词没找到，看了部分文档也没找到）。头条自己的官方示范的小程序自己都没适配。这就是他们的态度。好吧，别人不做，自己总得做做好，要不体验肯定会差的。

常规处理

像苹果这种棱角是圆弧的手机，底部顶部都是要做自适应处理，才可以有更好的体验。常规操作是加一个 margin 或 一个 padding 或补一个 div。而这些都会用到这个常量： env(safe-area-inset-bottom)

比如可以这样做：

    .safe-bottom {
        margin-bottom: env(safe-area-inset-bottom);
    }

    # 或
    .safe-bottom {
        box-sizing: box-border;
        padding-bottom: env(safe-area-inset-bottom);
    }

    # 或多加一个 div
    .safe-bottom {
        height: env(safe-area-inset-bottom);
    }

甚至可以和 calc 组合使用， 比如：

.footer {
    width: 100%;
    height: calc(88rpx + env(safe-area-inset-bottom));
    box-sizing: box-border;
    padding-bottom: env(safe-area-inset-bottom);
}

可是，头条小程序中 env(safe-area-inset-bottom) 这玩意不支持。

头条小程序自适应

既然一条路走不通，那就选其他的路。找找思路。比如只要能知道圆弧区域的高度不就可以了吗。在系统信息中，会携带这些信息（叫安全区域信息）。拿到了高度，一样可以 margin，一样可以 padding 哈。

那梳理下流程。

1. 在 main.js 中，拿到安全区域信息，并将底部的高度数据定义到 globalProperties 中。之所以这样做，是因为需要自适应场景的页面有很多个，不想每个页面都再重复去获取这些信息。
2. 在有需要的地方使用这个高度。

# main.js
import App from './App'
import { createPinia } from 'pinia'
import {
    createSSRApp
} from 'vue'

export function createApp() {
    const app = createSSRApp(App)

    app.use(createPinia())

    // 头条自适应
    // #ifdef MP-TOUTIAO
    const systemInfo = uni.getSystemInfoSync();
    if (systemInfo && systemInfo.safeAreaInsets) {
        app.config.globalProperties.$safeTop = systemInfo.safeAreaInsets.top;
        app.config.globalProperties.$safeBottom = systemInfo.safeAreaInsets.bottom;
    }
    // #endif

    return {
        app
    }
}

# 使用的地方
<view  hover-class="hover" :style="{'margin-bottom': $safeBottom + 'px'}">
</view>

好吧，就这样完事了。

字节小程序官方实例

滑到底部了，不仅不自适应，底部还有一部分被挡住了。

其实，并不赞成官方实例的搞法。底部导航栏非原生，会对整个项目带来影响。页面滚动不丝滑是其中之一，滚动条会滚动到底部不好看。要不就是使用 scroolview 隐藏了滚动条。反正体验还是不怎么好。