标签：fit 812px cover html 留白 设置 device 页面

在meta标签设置viewport-fit=cover，页面就会填充整个刘海区域（前提是浏览器或套页面的app必须做了iphonex的兼容）。

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

如果上面属性设置之后，再把html,boby高度设置成100% 发现底部出现空白没有填满，这主要是这里的100%，只是安全区域的高度，是不包含非安全区域的。要使页面元素（如：iframe）满屏， 就要把html,body高度设置成 812px(包含非安全区域)。css兼容如下：

@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
html,body{height: 812px;}
}

标签：fit,812px,cover,html,留白,设置,device,页面
来源： https://blog.csdn.net/weixin_53411402/article/details/120787947

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。