一个月前我在 iPhone X 的 Mobile Safari 中打开 Instagram web，发现页面底下的导航栏跟 iPhone 的 home indicator 重叠在一起不方便使用。我想既然 Apple 为 iPhone X 专门更新的 Human Interface Guidelines 并为 native app 引入了 safe area 和 inset 等概念，那 Mobile Safari 应该有对应的 web 概念吧。搜索了一下，发现 Apple 确实对 Mobile Safari 增加了对应的功能。既然 Instagram 是我们公司的产品，那就动手去改吧。
改造的第一步是对页面加上这一句：
<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>