如何防止虚拟键盘调整浏览器和元素的大小？

Question

我目前正在构建一个专注于移动设备的React.js应用程序，它非常依赖表单输入。对我来说一个主要的反复出现的问题是，在文本输入上调出虚拟键盘（在Android和iOS上）调整大小，或者更具体地“调整”屏幕及其中的元素，这最终会对我产生负面影响预期的设计美学，并通过使元素通常更小，更难以看到和与之交互，对应用程序本身的可访问性/可见性产生负面影响：

照片之前的例子

虚拟键盘弹出后的示例

注意内部占位符文本如何在向下移动的输入元素的顶部缩小。对于我要输入的文本也是如此。标题几乎完全被移出视图，我必须进行物理向上滚动再看一遍。

我试图实现类似于this one的解决方案，但不幸的是，这并没有阻止窗口延长，就像我的应用程序中的第二张图片一样。以下是我的Html.js文件中的相关代码段：

class Html extends Component {
  static propTypes = {
    assets: PropTypes.object,
    component: PropTypes.object,
    store: PropTypes.object
  }

  constructor(props) {
    super(props);
    this.state = {
      windowHeight: 0,
      windowWidth: 0
    }
  }

  handleResize(e) {
    window.resizeTo(this.state.windowWidth, this.state.windowHeight);
  }

  componentDidMount() {
    this.setState({
      windowHeight: window.innerHeight,
      windowWidth: window.innerWidth
    }, window.addEventListener('resize', this.handleResize.bind(this)));
  }

我也不相信我应该在主容器上设置min-height之类的任何CSS属性，因为我希望这个应用尽可能与设备无关，但我继续前进并做到了对于输入元素本身。

以下是上面显示的元素的HTML / JSX代码：

      <div className={styles.strains}>
        <h1>{this.props.options[0]}</h1>
        <div className="tagsDiv">
          <TagsInput
            ref="tags"
            placeholder={this.props.options[1]}
            className={styles2}
            maxTagLength="30"
            beforeTagAdd={this.handleBeforeTagAdd.bind(this)}
          />
          <button onClick={this.onChange.bind(this)} disabled={this.state.unknown}>Add</button>
        </div>
        <Checkbox options={this.state.cbOptions} onChange={this.handleUnknown.bind(this)} />
      </div>

背后的CSS：

input:not([type=range]):not([type=checkbox]) {
  border: .25vh solid $activeElement !important;
  border-radius: 1vh;
  font-size: 3.5vh;
  padding-left: 3%;
  min-height: 60px !important;
  font-weight: 300;
  outline: none;
}

.tagsDiv {
    position: absolute;
    max-height: 45vh;
  }

.react-tagsinput {
  position: absolute;
  bottom: 25vh;
  left: 10vw;
  height: 37.25vh;
  max-width: 80vw;
}

.react-tagsinput-input {
  position: absolute;
  text-indent: 1vw;
  left: 2vw;
  bottom: 7.5vh;
  min-width: 55vw;
  max-width: 55vw;
  min-height: 60px !important;
}

非常感谢任何尝试过这一切的人！