众所周知,iOS (Webkit) 的浏览器中长按很多元素都会出现一个阴影,做PWA应用时会非常不和谐。

去除长按阴影

* {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

去除蓝色边框

*:focus {
    outline: none;
}

*谨慎使用 可能会覆盖已有样式

适配全面屏

首先在 meta 中的 viewport 添加 “viewport-fit: cover”

Flarum 添加方法:修改 flarum/core/src/Frontend/Content/Meta.php

    private function buildMeta(Document $document)
    {
        $forumApiDocument = $document->getForumApiDocument();
        $meta = [
            'viewport' => 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover',
            'description' => Arr::get($forumApiDocument, 'data.attributes.description'),
            'theme-color' => Arr::get($forumApiDocument, 'data.attributes.themePrimaryColor')
        ];
        return $meta;
    }

然后添加CSS样式(For Flarum 且安装了底部栏插件):

.mobile-app-icon-bar {
    height: calc(~" 48px + constant(safe-area-inset-bottom) ");
    height: calc(~" 48px + env(safe-area-inset-bottom) ") !important;
}
#app {
    margin-bottom: env(safe-area-inset-bottom);
}

添加viewport-fit后,就可以使用CSS的 constant()、var() 获取安全区距离了。