原生<select>在手机上height无效，因iOS Safari和Android Chrome将其渲染为系统级控件，弹出层由系统控制；可优化按钮区域或改用自定义下拉实现可控高度。
height 对原生 <select> 在手机上基本无效，强行设置只会压扁顶部按钮区，弹出菜单高度仍由系统控制——iOS Safari 和 Android Chrome 都无视该样式。
为什么手机上设 height 没用
移动端浏览器（尤其是 iOS Safari）把 <select> 当作系统级控件渲染：点击后调起的是原生选择器（如 UIPickerView 或 Spinner），完全脱离页面 CSS 流。你写的 height: 40px 只影响按钮区域的视觉高度，对弹出层的行数、字体大小、滚动范围零作用。
常见错误现象：
• 设置 height + font-size 后，按钮看起来紧凑了，但点开还是满屏大字列表
• line-height、padding 在 <option> 上完全被忽略
• 使用 transform: scale() 缩放整个 <select>，在 iOS 上可能触发触摸热区失效（最小 44×44px 要求被破坏）
真正在手机上可控的两种方案
方案一：接受系统原生体验，只优化触发区域
• 给 <select> 加足够大的 padding（如 padding: 16px 12px），确保点击区域 ≥ 44px，避免误触
• 用 appearance: none + 自定义背景箭头，统一视觉，但不碰弹出层
• 不要加 min-height 或 max-height，它们在移动端无意义
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
方案二：彻底替换为自定义下拉（推荐用于强一致性需求）
• 结构用 <div class="dropdown"><button>...</button><ul>...</ul></div>
• 弹出层用 position: absolute + max-height: 200px + overflow-y: auto
• 必须监听 touchstart 判断外部点击（click 在 iOS 上有 300ms 延迟，关不掉菜单）
• 键盘支持需手动实现 ArrowDown/Escape，否则高对比模式或 VoiceOver 用户无法操作
容易被忽略的兼容性雷区
• iOS Safari 对 <select> 的禁用状态（disabled）有特殊处理：灰显但依然可点击触发原生选择器，必须配合 JS 阻断 pointer-events: none
• Android WebView 中，若用 transform: translateY() 做下拉动画，事件点击区域可能偏移，改用 max-height 过渡更稳
• 所有自定义下拉必须设 aria-expanded 和 aria-controls，否则 TalkBack 或 VoiceOver 会读成“静态文本”，不是可交互控件
真正要“改高度”，就别碰原生 <select> 的弹出层——它不是你的 DOM，是系统的。要么妥协于平台规范，要么接管全部渲染逻辑，没有中间态。
