我做了一個“thelounge”主題，它使用了“@ mixin bottomSafeAreaFixBrowser ”,并且它像預期的那樣工作；底部的#表單不會被頁面的其他部分掩蓋，但如果你點擊論壇/文本區，然后在iOS上點擊“完成”，一些文本會被隱藏在文本區之下。 “埋在文本區下面”的屏幕截圖

資料來源:https://github.com/ianonapp/thelounge-theme-ianon

@mixin bottomSafeAreaFixBrowser {
  html, body, #viewport, #chat-container {
    height: 100vh;
  }
  #chat-container .messages:last-child {
    padding-bottom: 70px;
  }
  #form:focus-within {
    margin-bottom: 60px !important;
  }
}

@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (display-mode: standalone) {
  @include bottomSafeAreaFix()
}
@media only screen and (min-device-width: 375px) and (max-device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (display-mode: browser) {
  @include bottomSafeAreaFixBrowser()
}

@media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (display-mode: standalone) {
  @include bottomSafeAreaFix()
}
@media only screen and (min-device-width: 390px) and (max-device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (display-mode: browser) {
  @include bottomSafeAreaFixBrowser()
}

@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) and (display-mode: standalone) {
  @include bottomSafeAreaFix()
}
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 2) and (display-mode: browser) {
  @include bottomSafeAreaFixBrowser()
}
    
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) and (display-mode: standalone) {
  @include bottomSafeAreaFix()
}
@media only screen and (min-device-width : 414px) and (max-device-height : 896px) and (-webkit-device-pixel-ratio : 3) and (display-mode: browser) {
  @include bottomSafeAreaFixBrowser()
}

@media only screen and (min-device-width : 428px) and (max-device-height : 926px) and (-webkit-device-pixel-ratio : 3) and (display-mode: standalone) {
  @include bottomSafeAreaFix()
}
@media only screen and (min-device-width : 428px) and (max-device-height : 926px) and (-webkit-device-pixel-ratio : 3) and (display-mode: browser) {
  @include bottomSafeAreaFixBrowser()
}

我做了一個“thelounge”主題，它使用了“@ mixin bottomSafeAreaFixBrowser ”,并且它像預期的那樣工作；底部的#表單不會被頁面的其他部分掩蓋，但如果你點擊論壇/文本區，然后在iOS上點擊“完成”，一些文本會被隱藏在文本區之下。