iphoneX的“刘海”为相机和其他组件留出了空间,同时在底部也留有可操作区域。那么网站边尴尬了~被限制在了这样的“安全区域”内,两边会出现一道白条。解决的方案是:1、给body添加一个background;2、添加viewport-fit=cover
meta标签,使页面占满整个屏幕。
前端viewport-fit=cover适应iphone X刘海屏幕方法,为了处理这些需求,iOS 11 的 Safari 引入了一些 constant 来处理 viewport-fit=cover 属性
html
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0,viewport-fit=cover">