小屏下原生 select 无法适配高度，因 iOS Safari 和 Android Chrome 强制使用全屏选择器，忽略 size、max-height、transform 等样式；唯一可靠方案是用 div+button+ul 自定义下拉，严格实现高度控制、触控、键盘导航与无障碍支持。
select 在小屏幕上根本不会“适配高度”——它要么走系统原生全屏选择器（iOS Safari、Android Chrome），要么无视 max-height 和 height，只按操作系统默认行数渲染。你调样式，浏览器大概率不认。
为什么小屏下size属性经常失效
移动端浏览器（尤其是 iOS Safari）会主动忽略 size 属性，强制将 select 触发为全屏 picker 控件。这不是 bug，是平台策略：系统级选择器优先保障可触控性与无障碍。即使你写了 <select size="3"></select>，在 iPhone 上点开后仍是整页滚动列表，size 形同虚设。
- Android Chrome 有时保留
size行为，但仅限非表单上下文或未聚焦状态 - 微信内置浏览器（X5 内核）对
size支持极不稳定，常回退到默认展开模式 -
size="1"在小屏上可能让元素变矮，但点击后弹出的依然是全高菜单，视觉与交互割裂
用transform: scale()缩放select的后果
有人试过 transform: scale(1, 0.7) 压扁下拉框，结果发现：顶部可点击区域确实变矮了，但弹出菜单仍按原始尺寸展开，甚至因缩放导致热区偏移、点不中选项。Chrome 120+ 还会直接在 Lighthouse 中报 “form elements not scalable”，提示可访问性风险。
Convert Markdown To HTML And PDF - Markdown和HTML、PDF互转
下载
实现 Markdown↔ HTML 互转，支持导出 PDF，用于用户请求的文档格式转换。
- 缩放同时影响文字、边框、内边距，需手动调
font-size补偿，维护成本高 - iOS Safari 对
transform后的select触摸热区识别更差，最小 44×44px 要求更容易被破坏 - 高对比模式下，缩放后的文字可能糊成一片，色值对比度不达标
真正能落地的小屏下拉高度控制方案
放弃原生 select 的幻想，用 div+button+ul 模拟，才能把高度、滚动、键盘导航、焦点管理全攥在手里。
立即学习“前端免费学习笔记（深入）”；
- 父容器必须设
position: relative，下拉层用position: absolute; top: 100%; max-height: 200px; overflow-y: auto—— 这才是真生效的限高 - 移动端要监听
touchstart和focus双事件，否则 iOS Safari 点击后菜单不展开 - 必须加
aria-expanded="false"和aria-controls="menu-id"，不然 VoiceOver 完全读不出状态 - 别省略 Escape 键关闭、ArrowDown/Up 导航、Enter 确认 —— 缺一个，键盘用户就卡死
最麻烦的不是写代码，而是把「点击展开 + 高度可控 + 移动端可触 + 键盘可操作 + 屏幕阅读器可读」这五件事全做对。漏掉任一环，小屏体验就断崖式下跌。
