如何为iOS Safari的meta viewport标签polyfill `interactive-widget=resizes-content`？

Chrome v108版本新增了对interactive-widget=resizes-content的支持，截至目前Firefox也已支持该属性，但在全屏模式下无法正常工作。

resizes-content的作用是：当虚拟键盘弹出时，浏览器会将页面内容“上推”，而非让键盘直接覆盖内容。

经测试，iOS Safari 17.4及更早版本均不支持该属性，有没有办法为它实现polyfill，最好能兼容iOS Safari 15及以上版本？

有人可能会想到用以下代码实现类似效果：

visualViewport.addEventListener('resize', function() {
  document.documentElement.style.height = window.visualViewport.height+"px";
});

但这种方法存在问题：当页面末尾附近的文本输入框触发键盘弹出时，Safari会自动延长文档长度，让文档延伸到键盘下方，这会导致上述方法出现难以解决的异常。

相关参考 #

• 如何检测浏览器是否支持viewport meta标签的“interactive-widget”属性？
• navigator.virtualKeyboard.overlaysContent：Safari不支持该API，且它的作用与resizes-content相反，和需求关联不大，但如果浏览器支持，或许可作为polyfill的组成部分。

内容的提问来源于stack exchange，提问作者joe