Bramus 向 Jake 学习了浏览器中存在的所有视口。如果您遇到了位置固定、vw 单位或高度:100% 方面的布局问题,本分集可能会说明原因。
章节:
- 00:00 - 序言
- 00:17 - 简介
- 01:03 - 桌面浏览器 / 布局视口
- 05:33 - ICB
- 12:51 - 视口单元
- 16:07 - 双指张合缩放 / 视觉视口
- 19:29 - 移动浏览器上的布局视口、ICB 和视觉视口
- 23:30 - 大、小和动态视口
- 28:35 - 视口单元及其与 ICB 的关系
- 30:25 - 当可编辑区域获得焦点时调整尺寸行为(在移动设备上)
- 36:01 - 虚拟键盘 API
- 38:44 - 了解我的水晶球
- 42:04 - 2022 年互操作性视口调查工作
- 43:20 - 结语
资源:
- 大型、小型和动态视口 → https://goo.gle/3qxhne7
- 通过 VirtualKeyboard API 防止内容隐藏在虚拟键盘之下 → https://goo.gle/3U9rl2X
- Interop 2022 视口调查工作量 → https://goo.gle/3DhBHYN
- Interop 2022 视口调查工作量测试页面 → https://goo.gle/3BDcuqy
- 关于视口大小调整行为和定位的 CSSWG 问题 → https://goo.gle/3QJe12q
规范:
- (布局)视口定义(CSS2 规范)→ https://goo.gle/3DlfjxG
- 包含块定义(CSS2 规范)→ https://goo.gle/3Dl9hwN
- 视口相对长度(CSS 值 4 规范)→ https://goo.gle/3ddLwvZ
- 视觉视口 (MDN) → https://goo.gle/3L9PsKU
- Visual Viewport API(CSSOM 规范)→ https://goo.gle/3qvAJk2
- 视口变体(CSS 值 4 规范)→ https://goo.gle/3U7Wd3M
- 虚拟键盘规范 → https://goo.gle/3qzq7R2
观看 HTTP 203 系列的更多视频 → http://goo.gle/HTTP203 点击此处订阅 Google Chrome Developers → https://goo.gle/ChromeDevs
此外,如果您喜欢此内容,可能会喜欢 HTTP203 播客 → https://goo.gle/HTTP203Podcast