Skip to content

Fixes the mobile workbench bottom navigation bar on iOS browsers#355

Open
colorfulshark wants to merge 1 commit into
JOYCEQL:mainfrom
colorfulshark:main
Open

Fixes the mobile workbench bottom navigation bar on iOS browsers#355
colorfulshark wants to merge 1 commit into
JOYCEQL:mainfrom
colorfulshark:main

Conversation

@colorfulshark

@colorfulshark colorfulshark commented Jun 6, 2026

Copy link
Copy Markdown

修改概述

修复 iOS 设备上移动端简历编辑页面底部导航栏的显示问题。

问题表现

  • iOS Chrome 中,底部导航栏会随页面滚动。
  • iOS Safari 中,导航栏会被底部地址栏遮挡。

问题主要由 iOS 浏览器对 100vh 的处理差异及未适配安全区域导致。

修改内容

  • 使用 100dvh 适配动态视口高度。
  • 禁止工作台页面整体滚动,仅允许内容区域滚动。
  • 将底部导航栏设置为不可收缩区域。
  • 使用 safe-area-inset-bottom 避免导航栏被遮挡。
  • 启用 viewport-fit=cover

验证

  • npm run build 构建通过。
  • pnpm dev 能够启动服务,在iPhone17中的Safari和Chrome中测试导航栏可以固定在底部.

fix-compare

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant