Question

用户开始在移动设备上打字时，website上的联系人字段正在缩小。我无法在任何大小的桌面浏览器窗口中检测到此行为。

联系人字段的结构是相对较新的css grid。

如何重新创建错误：

在您的移动设备上打开我的website
向下滚动到输入字段
关注一个并开始输入

我已经尝试通过将width和min-width应用于输入来解决此问题，但这并没有修复它。

我在有关不同浏览器和设备的电子表格中收集了相关信息，以了解是否出现错误。

https://docs.google.com/spreadsheets/d/1D3_7zh8u2MFAx5vt_mKCA9bjEI9crdDwwOSlucLLwfM/edit?usp=sharing

我认为它可能是一个浏览器错误，因为css grid相对较新？！你能重新创建这个bug吗？除了删除css grid并使用flexbox进行结构化之外，您有任何想法如何修复它吗？

我想尝试通知浏览器公司，如果它似乎是一个浏览器错误，那么他们可以修复它...

/*I actually use SCSS so this code will not run */
/* The grid */
.grid__form {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-areas: "name email" "textarea textarea" "feedback submit";
  grid-gap: 10px;
  @media screen and (max-width: 500px) {
    grid-template-columns: 100%;
    grid-template-areas: "feedback" "name" "email" "textarea" "submit";
}

/* The contact form */
.contact {
  grid-area: contact;
  margin-bottom: 100px;
  &__header {
    font-size: 500;
    color: $text-dark-primary;
    font-size: 2rem;
    text-align: center;
    margin: 0 0 30px 0;
      @media screen and (max-width: 500px) {
      font-size: 1.5rem;
    }
    &--link {
      text-decoration: none;
      color: rgba($color-secondary-400, 0.87);
      cursor: pointer;
      transition: $transition-standard;
      @media screen and (max-width: 359px) {
        font-size: 1.3rem;
      }
      &:hover {
        text-decoration: underline;
      }
    }
  }
  &__input {
    font-family: 'Roboto', 'Noto Sans', sans-serif;
    line-height: 1.5;
    font-size: 1rem;
    padding: 0.5em;
    border: 2px solid rgba(black, 0.20);
    border-radius: 2px;
    width: 100%;
    min-width: 100%;
    color: $text-dark-primary;
    background-color: white;
    cursor: text;
    outline: none;
    transition: $transition-standard;
    &--name {
      grid-area: name;
    }
    &--email {
      grid-area: email;
    }
    &--textarea {
      grid-area: textarea;
      resize: none;
      min-height: 250px;
    }
    &:focus {
      border: 2px solid $color-secondary-200;
      width: 100%;
      min-width: 100%;
    }
  }
  &__submit {
    font-family: 'Roboto', 'Noto Sans', sans-serif;
    line-height: 1.5;
    grid-area: submit;
    justify-self: end;
  }
  &__feedback {
    grid-area: feedback;
    align-self: center;
    margin: 0;
    font-size: 1rem;
    font-weight: 500;
  }
}

<form class="contact__form grid__form" action="_assets/php/sendMail.php" method="POST" novalidate>
  <input id="name" class="contact__input contact__input--name" type="text" name="name" placeholder="Name" />
  <input id="email" class="contact__input contact__input--email" type="email" name="email" placeholder="Email" />
  <textarea id="message" class="contact__input contact__input--textarea" type="text" name="message" placeholder="Message"></textarea>
  <p class="contact__feedback"></p>
  <button class="contact__submit button--raised" type="submit">submit</button>
</form>

Answer 1

问题可能是由input元素作为网格项引起的。有些浏览器可能在网格容器中使用表单元素很古怪，因为这种技术是如此新颖。

相反，将每个input包装在div中。这些div现在成为网格项，输入成为他们的子项（现在超出了网格布局的范围）。

如有必要，请为每个input提供一个width: 100%。

用户开始输入时输入收缩

1 个答案: