如何使我的文本和按鈕在移動設備上自動正確縮放（或者為什么還沒有）

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