你可能会说
首屏加载太慢了，用户还没滚动就走了，帮我优化一下首屏。
视口是浏览器中用户当前可见的页面区域，决定了「首屏」的范围。
你当前能「看到」的那块屏幕区域。网页可能很长，但视口只是你眼睛能看到的这一屏。
生活类比
像透过窗户看风景——风景很大，但窗户框住了你此刻能看到的范围。
🎮 动手试试
👇 切换设备查看视口如何影响布局
关于「视口」，以下哪个描述最准确？
你可以这样告诉 AI
帮我优化首屏性能：视口内的内容优先加载，图片用 loading=lazy，关键 CSS 内联，非首屏组件延迟渲染。
分辨率是屏幕物理像素数（如 1920×1080），视口是浏览器窗口中网页可见区域（会被工具栏压缩）。
全屏是隐藏浏览器 UI 占满整块屏幕，视口是正常浏览时可见的网页区域。
首屏性能优化
把视口内的关键内容优先渲染，视口外的图片/组件延迟加载，用户感知的打开速度更快。
和 AI 协作时
想让 AI 做首屏优化时，直接说「视口内的内容先加载，首屏之外用懒加载」。
纯打印场景
生成 PDF 或打印报表时没有「视口」概念，考虑用 @page 和 print 媒体查询替代。
与屏幕尺寸无关的项目
做纯后端 API、CLI 工具或数据处理脚本时完全不需要关心视口。
你当前能「看到」的那块屏幕区域。网页可能很长，但视口只是你眼睛能看到的这一屏。
像透过窗户看风景——风景很大，但窗户框住了你此刻能看到的范围。
和 AI 沟通时提到「首屏要快」，指的就是不滚动就能看到的部分要优先加载。