根本原因是viewport标签错误、css单位不匹配及媒体查询未区分方向。必须用width=device-width和initial-scale=1，按钮容器用rem或vw单位并设min-height，横屏需单独加orientation媒体查询，老webview需避免gap和flex:1。
按钮在手机上点不中、在电脑上太小、横屏时错位——根本不是“加个 media query 就完事”，而是从 HTML 结构、CSS 单位、viewport 控制三处同时出问题。
viewport meta 标签写错，按钮缩放就全乱了
移动端按钮失真，八成是因为 <meta name="viewport"> 没写对或没放对位置。它不是锦上添花，而是浏览器渲染的开关。
- 必须写成：
<meta name="viewport" content="width=device-width, initial-scale=1">，漏掉initial-scale=1会导致 iOS Safari 默认以 980px 宽度渲染，按钮被压缩成细条 - 不能写
maximum-scale=1或user-scalable=no——这会让按钮在双指缩放后无法重排，真机测试时点不到边缘区域 - 必须放在
最顶部，早于任何 CSS 引入，否则可能闪屏或触发两次重排 - 别信模拟器：Chrome DevTools 的 Device Toolbar 显示 DPR=2，但真机
window.devicePixelRatio可能是 3（如 iPhone 15 Pro），按钮点击热区必须按真实 DPR 计算
button 元素本身不能直接用 vw/vh 设宽高
<button></button> 是替换元素（replaced element），它的盒模型行为和 <div> 不同。直接写 <code>width: 50vw 在部分安卓 WebView（4.4 及更旧）里会失效或溢出容器。
- 正确做法是给按钮套一层容器（如
<div class="btn-wrapper">），把 <code>vw用在容器上，按钮设为width: 100% - 字体大小别用
vw直接设在button上：iOS Safari 8–10 不支持font-size: 4.266667vw，会 fallback 到浏览器默认值（通常 16px），导致手机端文字过小 - 优先用
rem+ JS 动态设置根字号，例如：document.documentElement.style.fontSize = document.documentElement.clientWidth / 375 * 16 + 'px';（以 iPhone 6 屏宽 375px 为基准） - 内边距（
padding）必须和字体单位一致：如果字体用rem，padding 也得用rem，混用px会导致缩放后按钮内容贴边甚至溢出 - 横屏平板要单独处理：
@media (min-width: 768px) and (orientation: landscape)，此时按钮宽度可能需从90%改为300px防止过宽 - 高度敏感场景（如登录弹窗里的按钮）加
@media (max-height: 600px)，避免被软键盘遮挡后无法滚动触达 - 别嵌套媒体查询：
@media (min-width: 768px) { @media (orientation: landscape) { ... } }是无效语法，CSS 解析器会忽略内层 - 用
min-width自下而上增强，而不是max-width降级：先写手机样式（无 media query），再加@media (min-width: 768px)覆盖平板，最后@media (min-width: 1024px)覆盖桌面——这样逻辑清晰，维护成本低 - 按钮容器必须显式设
min-height（如min-height: 44px），这是 iOS/Android 触控最小建议尺寸，老 WebView 不识别height: fit-content - 避免用
gap控制按钮间距，改用margin；避免flex: 1均分宽度，改用flex-basis: 0+flex-grow: 1兼容旧引擎 - 对齐别只靠
align-items：在按钮内部加display: flex; align-items: center; justify-content: center;，确保文字始终居中，不受父容器 flex 设置影响 - 真机测试必做：用 Android 4.4 实机或 BrowserStack 上对应版本跑一次，看按钮是否可点、是否有空白间隙、是否随键盘弹出重绘
媒体查询断点只按 width 写，横屏 iPad 就出问题
很多页面竖屏正常，一横过来按钮就堆到右上角、被键盘顶飞——这是因为只写了 @media (min-width: 768px)，却没区分方向。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
Flex/Grid 布局在老安卓 WebView 里按钮会塌陷
Android 4.4 系统 WebView（Chromium 30）对 flex-wrap、gap、align-items: center 支持极差，按钮常表现为高度为 0 或文字垂直居中失效。
按钮响应式最难的不是写多少代码，而是每个决策都要同时考虑三件事：viewport 怎么告诉浏览器“我是谁”、CSS 单位怎么让尺寸真正随视口变、老引擎怎么不把你的 flex 当空气。漏掉任何一环，用户就在某台设备上点不到那个“立即提交”。
