移动端适配问题

Question

web页面怎么对iphone x系列机型做安全区域的适配？？目前手机底部会有阴影

Answer 1

在meta name="viewport"改成<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, viewport-fit=cover" />关键就是viewport-fit=cover",它会使页面占满整个屏幕，然后你可以配合constant(safe-area-inset-bottom)对底部做一些操作了

Answer 2

if (/iPad|iPhone|iPod/.test(window.navigator.userAgent)) {
            document.body.classList.add('ios');
            if (screen.width == 375 && screen.height == 812) {
                document.body.classList.add('iphone-x');
            }
            if (screen.width == 414 && screen.height == 896) {
                document.body.classList.add('iphone-xr');
            }

        }

Answer 3

看看 这篇文章 ipx适配部分