當(dāng)在iOS Safari上選擇一個(gè)輸入字段時(shí)，大約會(huì)在DOM之外的HTML標(biāo)簽下面注入大約150px

在上面的截圖中，綠色邊框被應(yīng)用于HTML元素——下面的黑色可滾動(dòng)區(qū)域只有在輸入字段被聚焦時(shí)才能在iOS safari上訪問。而HTML元素保留其100vh/svh屬性

您可以看到& ltHTML & gt當(dāng)我將鼠標(biāo)懸停在控制臺(tái)中的元素上時(shí)，標(biāo)簽會(huì)變成藍(lán)色...我這樣做是為了幫助表明空白空間與網(wǎng)頁本身無關(guān)

預(yù)期的功能是讓鍵盤不要在鍵盤下方插入這個(gè)空格…就像iOS上的其他瀏覽器一樣

我花了一些時(shí)間，使用JS和CSS，使用不同的高度值(在我的實(shí)例中，SVH是首選)和溢出樣式設(shè)置，但這些都沒有影響，因?yàn)樘砑拥骄W(wǎng)頁的空間似乎與DOM無關(guān)，并且無法通過控制臺(tái)訪問

具體來說，我已經(jīng)試驗(yàn)過在頁面加載時(shí)計(jì)算實(shí)際的視口高度，然后在頁面的整個(gè)生命周期中使用這個(gè)固定值——通過將這個(gè)固定值應(yīng)用到body/ html元素來確保在顯示鍵盤時(shí)底部不會(huì)增加額外的空間

半鑄鋼?鋼性鑄鐵(Cast Semi-Steel)

body {
  --vh: 100vh; /* Fallback for browsers that do not support Custom Properties */
  height: calc(var(--vh, 1vh) * 100);
  overflow: auto;
}

射流研究…

useEffect(() => {
  let vh = window.innerHeight * 0.01;
  document.documentElement.style.setProperty('--vh', `${vh}px`);
  
  window.addEventListener('resize', () => {
    let vh = window.innerHeight * 0.01;
    document.documentElement.style.setProperty('--vh', `${vh}px`);
  });

  return () => {
    window.removeEventListener('resize', () => {
      let vh = window.innerHeight * 0.01;
      document.documentElement.style.setProperty('--vh', `${vh}px`);
    });
  };
}, []);

但是由于注入的空間似乎不是DOM的一部分——更新& ltHTML & gt或者& ltbody & gt標(biāo)簽并不能真正解決問題。

有人找到解決這個(gè)問題的方法了嗎？

代碼沙箱(代碼) 代碼沙箱(演示) 屏幕錄制 另一個(gè)(未解決的)SO線程討論相同的問題 我試著用DevTools修復(fù)你的css。 我設(shè)法通過添加框大小來修復(fù)它:邊框；

我希望這有所幫助。

第一個(gè)解決方案是用下面的代碼更新html標(biāo)簽樣式

html {
border: 5px solid green;
max-height: 100svh;
max-width: 100vw;
height: 100vh;
width: 100vw;
overflow: hidden;
box-sizing: border-box; //Add this

}

第二個(gè)解決方案是給定高度100vh - 10px，寬度100vw - 10px，因?yàn)檫吙蛟趯挾群透叨壬险加?5 + 5)個(gè)像素，所以從寬度和高度上減少它的使用

html {
    border: 5px solid green;
    max-height: 100svh;
    max-width: 100vw;
    height: calc(100vh - 10px); //reduce 10px from height (5px + 5px) border of top and bottom
    width: calc(100vw - 10px);  //reduce 10px from width (5px + 5px) border of left and right
    overflow: hidden;
}

也給文本區(qū)域字段css屬性

textarea {
width: 100%;
max-width: 100%;
resize: none;  //It will disable option to resize textarea by textarea bottom-right corner
}

試試看，讓我知道它是否有效 謝謝你

我建議嘗試:

body {
  height: 100%;
  overflow: auto;
}

我不知道這是否可行，因?yàn)槲覜]有看到任何實(shí)際的html