html - 单击输入字段时屏幕移动

Question

.input--custom {
  border: 0.1px solid #cfd7fd;
  padding: 15px;
  display: block;
  height: 100px;
  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>

我有一个像这样的模式，底部有一个输入组件。当我单击输入组件进行打字时，屏幕自动聚焦在输入组件上(放大)。因此，我再次拖动并调整位置以看到发送按钮。

有什么办法可以让 Modal 保持在同一位置而不发生任何移动吗？

点击之前，这是它的样子

单击输入字段后，它的变化如下

需要更改哪些属性才能避免出现这种情况？您还需要其他信息吗？

Answer 1

大多数移动浏览器上的默认行为是在元素的字体大小小于 16 像素时进行缩放。

就您而言，您可以将 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>

此外，您可以使用下面的元标记简单地停用所有缩放，但是只要元素的字体大小小于 16 像素，iOs 设备就会继续缩放输入字段。

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