親愛的AIKO

1. HTML的meta標籤加上 viewport-fit=cover

範例

<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, user-scalable=no, viewport-fit=cover">

2. 新增CSS語法

範例

body{
  padding-top: constant(safe-area-inset-top); /* iOS 11.0-iOS 11.1 */
  padding-top: env(safe-area-inset-top); /*iOS 11.2 */
  padding-bottom: constant(safe-area-inset-bottom); /* iOS 11.0-iOS 11.1 */
  padding-bottom: env(safe-area-inset-bottom); /*iOS 11.2 */
}

--補充說明--

這邊的body可修改到欲套用的標籤 例如header footer

constant 適用 iOS 11.0-iOS 11.1

env 適用 iOS 11.2以後的版本

圖片來源:  https://toutiao.io/posts/kx9bqo/preview