2020.5小白记录iphone刘海与小黑条前端适配_前端如何判断有刘海屏的js 2020-CSDN博客

本文链接：https://blog.csdn.net/weixin_45029438/article/details/106014360

为了避免到处百度，记录自己前端学习的点点滴滴
iphoneX已测试

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            padding-top: env(safe-area-inset-top);
            padding-left: env(safe-area-inset-left);
            padding-right: env(safe-area-inset-right);
            padding-bottom: env(safe-area-inset-bottom);
            height: 100vh;
        }

        div {
            width: 100px;
            height: 100%;
            background: red;
        }
    </style>
    <script>
        document.addEventListener('gesturestart', function (event) {
            event.preventDefault();
        })//禁止iphone双指放大
        window.onload =
            setTimeout(function () {
                var pd = document.querySelector('body')
                var pd1 = window.getComputedStyle(pd)
               // console.log(pd1.paddingBottom)
                alert(pd1.paddingBottom)
            }, 5000)


            // 2020.5.9
    </script>
</head>

<body>
    <div>
        这是一段文字
    </div>
</body>

</html>