iOS Safari 在输入焦点上覆盖 100vh：在 DOM 下面注入空白空间

问题描述 投票：0回答：4

在 iOS Safari 上选择输入字段时，会在 DOM 外部、HTML 标签下方注入大约 ≈150px

enter image description here

在上面的屏幕截图中，绿色边框已应用于 HTML 元素 - 下方的黑色可滚动区域仅在输入字段获得焦点时才能在 iOS safari 上访问。而 HTML 元素保留其 100vh/svh 属性

当我将鼠标悬停在控制台中的元素上时，您可以看到 

<HTML>
标签变成蓝色...我这样做是为了帮助表明空白空间与网页本身无关

键盘的预期功能是不要在键盘下方注入此间距......就像 iOS 上的其他浏览器的情况一样

enter image description here

我花了一些时间使用 JS 和 CSS 来摆弄不同的高度值（在我的实例中首选 SVH）和溢出样式设置，但这些都没有影响，因为添加到网页的空间似乎与DOM 且无法通过控制台访问

具体来说，我已经尝试过计算页面加载时的实际视口高度，然后在页面的整个生命周期中使用这个固定值 - 通过将此固定值应用于 body/html 元素以确保不会添加额外的空间显示键盘时位于底部

CSS

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


JS

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 的一部分 - 更新 

<HTML>
或 
<body>
标签的高度实际上并不能解决问题。

有人找到解决办法了吗？

javascript html css dom safari
4个回答
1
投票

我尝试使用 DevTools 修复你的 CSS。 我设法通过添加 

box-sizing: border-box;

来修复它

我希望这有帮助。

0
投票

第一个解决方案是使用以下代码更新您的 html 标签样式

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

}

第二个解决方案是给高度 100vh - 10px 和宽度 100vw - 10px 因为边框在宽度和高度上占用 (5 + 5) 像素，所以从宽度和高度使用中减少它

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;
}

还将 css 属性赋予 textarea 字段

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

尝试一下，然后告诉我是否有效 谢谢你

0
投票

两年后，这个探测器不断出现，最后我解决了它，不管你相信与否，这不是视口高度问题！这是视口宽度问题！如果您的页面中有任何类型的水平滚动（想要或不想要），以便页面的实际宽度大于 vw，则 safari 上的屏幕键盘会在底部添加空白区域。 尝试一下

-1
投票

我建议尝试：

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

我不知道它是否会起作用，因为我没有看到任何实际的 html

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.