我有一个网络应用程序，如下图1所示，一切看起来都很不错。问题是，当应用程序在具有缺口的移动设备上启动时，就会产生布局问题，如您在图2中可以看到的。而且我不能使用“安全区域”，因为某些页面需要粘贴在顶部，就像图片3。
我可以通过添加媒体查询以在iPhone X的内容上方添加填充来轻松解决此问题，但是问题在于，不仅iPhone X都有缺口。
理想情况下，应该有一个JS方法来检测带有缺口的手机(并返回该缺口的高度会更好)，但是这可能吗？如果没有，解决这个问题的更好方法是什么？我是否必须为世界上的每个智能手机创建媒体查询？
最佳答案
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);