當我在IOS Safari上處于橫向模式時，我試圖讓我的網站填充屏幕(缺口)的左右兩側，但沒有一個解決方案有效。

我已經添加了meta標簽& ltmeta name = & quot視窗& quotcontent = & quotwidth =設備寬度，initial-scale=1，viewport-fit=cover& gt我還補充了

@supports(padding:max(0px)) {
    body, header, footer {
        padding-left: min(0vmin, env(safe-area-inset-left));
        padding-right: min(0vmin, env(safe-area-inset-right));
    }
}

我注意到body標簽上的背景色確實有用，但是我需要背景圖片來填充空間。

有人有什么想法或者解決辦法嗎？

更新:

這是我所說的內容的屏幕截圖

這是CSS

div.et_pb_section.et_pb_section_6 {
    background-position: center top;
    background-image: url(https://XXXXXX.com/wp-content/uploads/2023/05/graphic-pattern@2x.png),linear-gradient(180deg,#80b6d7 0%,#d2c5de 100%)!important;
}

viewport-fit=cover似乎對我有用，但作為代碼片段運行時就不行了。在iPhone上運行下面的代碼片段時，您看不到想要的結果。(我認為這是snipp ets的一個局限性——即使是顯示在整個頁面中的代碼片段也仍然在iframe中，所以meta標記的范圍僅限于該iframe。)

但是，嘗試這個鏈接，它實際上與代碼片段具有相同的代碼，您可以看到圖像確實填充了缺口區域(當手機處于橫向時)。

body {
  background-image: url(https://picsum.photos/id/237/1000);
  background-size: cover;
  background-position: center;
  height: 100svh;
}

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