如何检测手机缺口？
Val*_*ald 3 html javascript css mobile
我有一个像下面的图片 1 一样的网络应用程序，一切看起来都很好。问题是，当应用程序在有缺口的手机上启动时，会产生布局问题，如图 2 所示。我无法使用“安全区域”，因为我的某些页面需要卡住在上面，如图 3 所示。
我可以通过添加媒体查询在 iPhone X 上的内容上方添加填充来轻松解决这个问题，但问题是不仅 iPhone X 有一个缺口。
理想情况下，应该有一种 JS 方法来检测带有凹口的手机（并返回该凹口的高度会更好）但这可能吗？如果没有，处理这个问题的更好方法是什么？我是否必须为世界上的每部智能手机创建媒体查询？
小智 7
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);