移动端搜索栏被压缩的核心原因是软键盘弹出导致安卓视口高度重算，应放弃100vh依赖，改用JS锁定初始高度（如document.documentElement.clientHeight）并写入body，再结合fixed定位+flex布局隔离搜索栏，避免受滚动和压缩影响。
移动端搜索栏被压缩，核心原因是软键盘弹出时安卓系统重新计算视口高度，导致 100vh 或百分比高度的容器被“挤压”，尤其是当搜索栏位于可滚动区域中、又依赖父容器高度做布局时。单纯靠媒体查询无法监听键盘状态，所以必须结合视口高度重设 + 布局模式切换来解决。
用固定视口高度替代 100vh
安卓软键盘会收缩 window.innerHeight，但不会改变 screen.height。直接用 100vh 就等于随键盘动态缩放，必然压缩内容。稳妥做法是：页面加载后立即用 JS 获取真实可用高度并写死到 body 或根容器上：
- 执行
document.documentElement.clientHeight（推荐）或screen.height（更稳定但略偏大） - 将结果赋给
body.style.height = height + 'px' - 后续所有子元素（包括搜索栏所在区域）都基于这个固定高度做百分比或 calc 计算
搜索栏改用 flex + 固定定位组合
避免它被卷入滚动流或受父容器压缩影响：
- 给搜索栏容器设
position: fixed; top: 0; width: 100%; z-index: 100; - 内部用
display: flex分配输入框和按钮宽度，例如：input { flex: 1; }，button { width: 44px; } - 主内容区加
padding-top: 44px（搜索栏高度），防止被遮挡
媒体查询只管断点，不管键盘
媒体查询适合响应式断点（如 @media (max-width: 768px)），但它无法感知软键盘是否弹出。所以别指望只靠它修复压缩问题：
立即学习“前端免费学习笔记（深入）”；
- 可以配合用它隐藏桌面端导航、显示汉堡菜单，但不能用来“修复高度”
- 若搜索栏在移动端需全宽且居中，可用
left: 50%; transform: translateX(-50%)配合固定定位，确保不偏移 - 慎用
min-height: 100vh—— 安卓下它会随键盘跳变，反而加剧抖动
补充：输入框聚焦时临时提拉内容区
如果搜索栏在页面中部、无法固定定位，可在 focus 事件中手动提升包含它的区块：
- 监听
input[type="text"]的focus，给父容器加transform: translateY(-80px)类（数值按需调整） - 用
blur事件还原，避免残留偏移 - 搭配
transition: transform 0.2s让移动更自然
基本上就这些。重点不是“怎么写媒体查询”，而是放弃对 vh 的依赖，用 JS 锁定初始高度 + 用固定定位/弹性布局隔离搜索栏。不复杂但容易忽略。
