网站移动端适配及计算器尺寸调整问题求助

• 调整容器整体适配：仅修改字体大小不足以解决小屏适配问题，给.calculator容器添加自适应限制，避免溢出屏幕：

@media only screen and (max-width: 600px) {
  .calculator {
    font-size: 18px;
    max-width: 90vw;
    padding: 1rem;
    margin: 0 auto;
    box-sizing: border-box;
  }
}

• 按钮布局自适应：将计算器按钮改为弹性布局，让按钮自动填充容器宽度，避免固定宽度导致的排版错乱：

.calculator .btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.calculator .btn {
  flex: 1 1 22%; /* 一行容纳4个按钮，预留间距 */
  min-height: 48px; /* 满足移动端触摸最小点击区域要求 */
  display: flex;
  align-items: center;
  justify-content: center;
}
@media only screen and (max-width: 600px) {
  .calculator .btn {
    flex: 1 1 23%; /* 小屏微调占比，防止按钮换行 */
    font-size: inherit;
  }
}

• 显示区域优化：确保输入输出框占满容器宽度，同时提升字体层级增强可读性：

.calculator .display {
  width: 100%;
  box-sizing: border-box;
  padding: 1rem;
  font-size: 1.3em;
  margin-bottom: 1rem;
}

• 补充viewport健壮性：给viewport标签添加额外属性，避免移动端缩放异常：

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

内容的提问来源于stack exchange，提问作者WillTheRider