IOS网页适配，解决iphoneX下部小黑条问题 和hover不起作用

感谢博主博文：

原文链接

https://blog.youkuaiyun.com/chunxiaqiudong5/article/details/104065563?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.not_use_machine_learn_pai&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.not_use_machine_learn_pai

 

按照博主链接，基本能解决所有，我细化到我遇到的问题：

1 设置meta

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

2 设置body

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