如何使我的文本和按钮在移动设备上自动正确缩放（或者为什么还没有）

Question

我正在制作 web 应用程序，但无法使其适合移动设备。 使用 css @media 标签我已经能够更改我的 div 的顺序，因此它们在移动设备上彼此下方而不是彼此相邻。 这会自动导致我的大部分文本正确缩放，除了按钮和输入。
我做错了什么，我该如何解决？

完整的 CSS 可以在这里找到
完整的 HTML 可以在这里找到
可以在此处找到工作应用程序（但是一旦我找到解决方案，它将不再有问题）

可能相关的 CSS 部分是：

/*the outer container*/
#container {
    margin-left: 5%;
    margin-right: 5%;
    display: grid;
    grid-template-columns: 90vw;
    grid-template-rows: 80vw 80vw auto;
    gap: 15px 10px;
    grid-template-areas:
      "a"
      "b"
      "c";
}
/*the div containing both the controls and the explanation*/
#controls {
    grid-area: c;
    width: 100%;
    position: relative;
}
/*the color picker (including the apply and clear buttons)*/
#colorpicker{
    width: max(300px, 90%);
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: auto auto auto;
    gap: 1px 1px;
    grid-template-areas:
      ". u . . c"
      "l f r b c"
      ". d . . c";
  }
/*The two buttons within the color picker*/
#button {
    grid-column: 1;
    grid-row: 1;
}

到目前为止，正如您可能看到的，我已将每个可能的大小更改为百分比、fr 或不同的可变大小，但这并没有帮助。 没有使用字体大小，不适用于 forms 或解释。 有什么建议吗？

非常感谢。

Answer 1

我终于在 w3schools 上找到了它：只需添加<meta name="viewport" content="width=device-width, initial-scale=1.0">
资料来源： W3schools