如果元素的字体大小小于16px，大多数移动的浏览器的默认行为是缩放。
在您的情况下，您可以添加一个font-size:16px到您的.input--custom类来解决这个问题。以下是Codepen上的一个工作演示（以便在您的移动终端上轻松测试）：https://codepen.io/atalaykutlay/pen/vYzapNJ

.input--custom {
      border: 0.1px solid #cfd7fd;
      padding: 15px;
      display: block;
      height: 100px;
      font-size:16px;
      width: 100%;
      /* set a fixed width in pixels */
      box-sizing: border-box;
      /* include border and padding in total width */
      word-break: break-word;
      /* allow long words to break and wrap to next line */
      overflow: hidden;
      /* hide any overflow */
      ;
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    }

    .input--width {
      height: 100px;
      white-space: pre-wrap;
      overflow-wrap: break-word;
    }

    textarea::placeholder {
      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
    }

    .chatbox textarea {
      position: absolute;
      bottom: 0;
    }

    textarea:focus {
      outline: none;
    }

    .conversation {
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-items: flex-start;
      width: 100%;
      justify-content: space-between;
      box-sizing: border-box;
      padding: 10px;

    }

    .conversation .operator-response {
      background-color: rgb(245, 245, 245);
      color: #333;
      padding: 15px 18px;
      border-radius: 10px;
      margin-bottom: 10px;
      max-width: 80%;
      word-wrap: break-word;
      text-align: left;
      margin-right:auto;
      box-sizing: border-box;
      clear: both;
      margin-bottom: 20px;
      margin-top: 20px;

    }

    .conversation .user-input {
      /* background-color: #f4f6ff; */
      background-color: #000;
      color: white;
      padding: 15px 18px;
      border-radius: 10px;
      margin-bottom: 10px;
      max-width: 80%;
      word-wrap: break-word;
      text-align: right;
      margin-left:auto;
      box-sizing: border-box;
      clear: both;
      align-self: flex-end; /* added */

    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

    <Modal visible={visible} onCancel={onClose} centered footer={null} // title={title} bodyStyle={{ height: "70vh", overflowY: "auto", margin: "0", padding: "0" }}>

      <div style={{overflow: 'auto', height: '60vh'}}>

        <div ref={conversationContainerRef}>

          <div key={index} class="conversation">

            <div class="operator-response">Hi. How can i change settings</div>
            <div class="user-input">Go to settings page </div>

          </div>
          <div style={{display: "flex"}} class="conversation">
            <div class="operator-response">Hello how are you</div>

          </div>

        </div>

      </div>

      <div class='flexrow'>
        <textarea onChange={handleChange} placeholder="Type your message here and click submit" class="input--custom input--width "></textarea>
        <img onClick={handleSubmit} class="sendButton" style={{width: "20px", paddingLeft: "20px"}} src={sendIcon}></img>
      </div>

    </Modal>

此外，您可以简单地使用下面的 meta标签取消所有缩放，但是只要元素的字体大小小于16px，iOS设备就会一直放大输入字段。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />