刘海屏也叫水滴屏，指的是手机屏幕正上方由于追求极致边框而采用的一种手机解决方案。

测试时重点关注全屏显示时刘海区域是否会遮挡住页面上的控件或者背景。

前言

毫无疑问，当夏普发布全球首款“异形全面屏”手机——AQUOS S2时，是被开发者甚至用户所唾弃的。但是苹果刘海屏iPhone X的到来，让人们慢慢接受了这一妥协的设计方案。直到今天，大批Android手机厂商的跟进，把整个移动开发行业都带进了刘海屏的深坑。
相对于苹果单一的设备/系统，适配刘海屏还是比较容易的。然而，在目前的Android生态下，不同的厂商，不同的定制系统，有着不同的刘海面积......

现状

目前就国内的手机厂商来说，已经推出刘海屏的厂商有华为、OPPO、VIVO，传言小米也即将推出刘海屏手机。基本上国内五大厂商都推出了自己的刘海屏手机（另一个是苹果），还有其他如LG，一加等等的刘海屏手机也在路上了。2018年的今天，刘海屏的应用适配已经不容忽视了。

适配

关于全面屏即18:9非异形屏幕适配方案可以参考笔者之前的文章：

• Android手机 全面屏（18：9屏幕）适配指南 。

在推出自家的刘海屏收集后，大部分厂商也在开发者平台中更新了适配的文档：

• VIVO异形屏适配指南

• OPPO凹型屏适配说明

• 小米MIUI Notch 屏适配说明

其中大都提到了屏幕安全区的概念，以及判断是否为刘海屏手机的方法，具体细节可以参考官方文档。由于目前Android P仍未发布，Android生态中尚未官方支持刘海屏，所以各家的方案实现都有不同，这也给我们开发者带来了额外的适配成本。

工具类

根据VIVO、OPPO、华为官方文档，这里整理了一个刘海屏工具类，判断设备是否为刘海屏，其他厂商公布相关方法后也会在此更新。

OPPO（已验证）：

/**     * OPPO     *     * @param context Context     * @return hasNotch     */
    public static boolean hasNotchInOppo(Context context) {
        return context.getPackageManager().hasSystemFeature("com.oppo.feature.screen.heteromorphism");
    }

VIVO（已验证）: 新测试机到了，马上验证了一下，此外也感谢评论区 

@赵树超

/**     * VIVO     * 
     * android.util.FtFeature     * public static boolean isFeatureSupport(int mask);     * 
     * 参数:     * 0x00000020表示是否有凹槽;     * 0x00000008表示是否有圆角。     *     * @param context Context     * @return hasNotch     */
    private static boolean hasNotchInVivo(Context context) {
    boolean hasNotch = false;
    try {
        ClassLoader cl = context.getClassLoader();
        Class ftFeature = cl.loadClass("android.util.FtFeature");
        Method[] methods = ftFeature.getDeclaredMethods();
        if (methods != null) {
            for (int i = 0; i < methods.length; i++) {
                Method method = methods[i];
                if (method.getName().equalsIgnoreCase("isFeatureSupport")) {
                    hasNotch = (boolean) method.invoke(ftFeature, 0x00000020);
                    break;
                }
            }
        }
    } catch (Exception e) {
        e.printStackTrace();
        hasNotch = false;
    }
    return hasNotch;}

华为（已验证）：

/**     * HUAWEI     * com.huawei.android.util.HwNotchSizeUtil     * public static boolean hasNotchInScreen()     *     * @param context Context     * @return hasNotch     */
    public static boolean hasNotchInHuawei(Context context) {
        boolean hasNotch = false;
        try {
            ClassLoader cl = context.getClassLoader();
            Class HwNotchSizeUtil = cl.loadClass("com.huawei.android.util.HwNotchSizeUtil");
            Method get = HwNotchSizeUtil.getMethod("hasNotchInScreen");
            hasNotch = (boolean) get.invoke(HwNotchSizeUtil);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return hasNotch;
    }

除了OPPO的判断简单点外，其他两家厂商都是用反射来获取刘海屏幕信息的。除了VIVO外，另外两家设备都测试过了，有相关设备的开发者可以自行测试一下，欢迎评论私信反馈。

结语

最后，不得不感叹苹果的号召力。跟风也好，抄袭也罢，最为开发者，吐槽之后，还是得做好应用适配。

    .header {
            position: relative;
            height: 44px;
            background-color: #06091C;
            color: #fff;
        }

        .header .left {
            position: absolute;
            width: 44px;
            height: 44px;
            left: 0;
            bottom: 0;
            background-image: url('../../image/strategy/back.png');
            background-repeat: no-repeat;
            background-size: 20px 20px;
            background-position: 8px center;
        }

        .header .center {
            position: absolute;
            width: 60%;
            height: 44px;
            left: 20%;
            bottom: 0;
            font-size: 20px;
        }

        .header .right {
            position: absolute;
            height: 44px;
            right: 0;
            bottom: 0;
            font-size: 14px;
            padding: 0 12px;
        }

        

        

            发微博
        

        

            发布
        

   

  apiready = function() {
        fixStatusBar();
}

//修复沉浸式头部高度
function fixStatusBar() {
    var el = document.querySelector('header');
    if (!el) {
        return;
    }
    el.style.paddingTop = api.safeArea.top + 'px';
    window.headerHeight = el.offsetHeight; // 获取header高度
}