首屏高度控制失效需确保容器直挂页面根节点并设min-height为100dvh；若版本不支持则降级100vh并保存刷新；iOS需JS或CSS兜底；真机验证不可滚动且地址栏收起时内容不移位。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
用函子Zion做落地页时，首屏高度控制失效会导致用户第一眼看不到核心价值信息，直接划走——这不是文案问题，而是容器未锚定视口物理边界，Zion默认渲染逻辑会忽略移动端真实可见区域。
确认Zion中首屏容器的定位层级
在页面画布中选中首屏所在最外层容器（通常是【视图】或【分组】），右键→「检查父级结构」，确保其直接挂载在【页面】根节点下，而非嵌套在滚动容器、条件式容器或列表项内部。若发现它被包裹在「列表→容器视图→视图」三层结构里，立即剪切出来，拖到页面一级；否则后续所有高度设置都会被父容器的flex或overflow: hidden截断。
这一步操作起来很简单，直接把文件拖进去就行。
设置容器最小高度为动态视口单位
选中首屏容器→右侧属性面板→「布局」→「最小高度」→输入 【100dvh】；若Zion当前版本不识别dvh（如v2.8.3以下），则降级为 【100vh】 并立即执行下一步。
Zion v2.9+已原生支持dvh，但旧项目升级后可能缓存CSS解析规则；若设完100dvh仍显示顶部留白或底部遮挡，说明浏览器未触发重绘，需手动触发：点击画布任意空白处→按Ctrl+S保存→再刷新预览页。
绑定iOS Safari兼容性兜底逻辑
方法一：JS注入强制修正
在Zion「设置」→「自定义代码」→「页面底部JS」粘贴以下代码：
if ('dvh' in CSS && getComputedStyle(document.documentElement).height !== '100dvh') { document.documentElement.style.height = '100dvh'; }
方法二：CSS变量动态覆盖
在「自定义代码」→「页面头部CSS」中添加：
:root { --z-viewport-height: 100dvh; } .z-ion-hero { min-height: var(--z-viewport-height); }
注意：.z-ion-hero 需替换为你首屏容器实际的class名，可在浏览器开发者工具中Inspect确认。
【必须在保存前复制class名，Zion每次发布会重生成随机class，仅本地编辑时有效】
验证首屏是否真正“不可滚动”
第一步：真机扫码预览，竖屏打开，禁止双手指缩放；
第二步：手指轻触屏幕顶部，缓慢向下拖动——若内容跟随移动，说明min-height未生效，返回上一步检查容器是否被overflow: auto父级包裹；
第三步：保持手指不动，观察地址栏是否随滚动收起；若收起后首屏内容上移露出空白，证明用了100vh而非100dvh，必须切换。
这一步不能跳过，Zion模拟器无法复现iOS Safari地址栏动态高度变化。
