如何检测移动陷波？

Question

我有一个网络应用，如下图1所示，一切看起来都不错。问题是，当应用程序在具有缺口的移动设备上启动时，就会产生布局问题，如您在图2中可以看到的。而且我不能使用“安全区域”，因为某些页面需要粘贴在顶部，如图3所示。

我可以通过添加媒体查询来轻松解决此问题，方法是在iPhone X的内容上方添加填充，但是问题是，不仅iPhone X都有缺口。

理想情况下，应该有一个JS方法来检测带有缺口的手机（并返回该缺口的高度会更好），但这可能吗？如果没有，解决这个问题的更好方法是什么？我必须为世界上的每个智能手机创建媒体查询吗？

Answer 1

HTML ：：

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

CSS ::

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