移动端Chrome弹出键盘致CSS按钮文本异常的解决咨询

这是个很常见的移动端浏览器适配坑，尤其是Chrome弹出软键盘时会大幅缩小视口高度，咱们从你的CSS代码入手，一步步修复：

问题根源分析 #

你的.buttonMain用了百分比高度和em字体单位，这两个相对单位在视口高度骤变（键盘弹出）时，会导致按钮被过度压缩，文本要么溢出、变形，要么被截断：

• height: 50%：视口高度变小时，按钮高度会跟着减半，直接挤压文本空间
• font-size: 2em：em是相对父元素字体大小的单位，若父元素布局受视口影响，字体大小会连锁变化

具体修改方案 #

把你的CSS调整成以下形式，替换相对单位为更稳定的固定值或rem，同时添加文本保护：

.buttonMain {
  width: 60%;
  /* 用固定高度替代百分比，避免视口变化时按钮被压缩 */
  height: 60px;
  /* 或者用min-height保留弹性：min-height: 50px; */
  margin-top: 2%;
  /* 把百分比padding改成固定px，防止内边距随视口异常缩放 */
  padding: 12px 0;
  border-radius: 40px;
  font-family: $fontMain;
  background-color: $buttonColor;
  /* 改用rem作为字体单位，相对根元素更稳定 */
  font-size: 1.2rem;
  font-weight: bold;
  /* 确保文本居中，防止偏移 */
  text-align: center;
  /* 可选：添加文本溢出控制，避免长文本截断 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

额外优化建议 #

1. 检查页面的viewport meta标签，确保正确配置：

   <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
   

   这个标签能让浏览器正确识别移动端视口，减少布局异常。
2. 如果按钮在flex布局容器中，确保容器没有因视口变化被压缩，可给容器添加min-height: 100vh来保持基础高度。

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