H5 手机适配

A small

已于 2022-08-17 14:37:49 修改

阅读量1k

点赞数

文章标签： html5 javascript css3

于 2021-07-23 16:16:39 首次发布

本文链接：https://blog.csdn.net/zjmxbd/article/details/119038357

版权

在开发H5页面时，针对刘海屏、水滴屏和小黑条等不同手机屏幕，可以使用CSS的`constant(safe-area-inset-*)`和`env(safe-area-inset-*)`来实现完美适配。通过设置padding值，确保内容不会被屏幕边缘遮挡，从而提供良好的用户体验。此方法同时兼容iOS和Android系统。

摘要由CSDN通过智能技术生成

刘海屏，水滴屏、小黑条适配，兼容ios，安卓

当我们在写h5页面的时候，常常会遇到刘海屏，水滴屏，小黑条等手机，
加入以下css，即可以解决适配

padding:	constant(safe-area-inset-top) 
			constant(safe-area-inset-right)
			constant(safe-area-inset-bottom)
			constant(safe-area-inset-left);.
			
padding: env(safe-area-inset-top)
			 env(safe-area-inset-right)
			 env(safe-area-inset-bottom)
			 env(safe-area-inset-left);

padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);