The Mobile Viewports
summary
Argues there are three concrete mobile viewports — layout, visual, and ideal — and the key claim is that responsive design works because setting the layout viewport to the ideal viewport (meta viewport width=device-width or width=XYZ) aligns CSS math with what media queries report. Demonstrates quirks: initial-scale=1 maps to the ideal viewport, devicePixelRatio = device pixels ÷ ideal viewport, and many inconsistencies (Android WebKit, UC, IE10) crop up; solutions include using width not device-width and min/max breakpoints, and notes this was tested on 50 browsers.
AI-written summary · about
chapters (20)
- 0:00Intro
- 1:37A pixel is not a pixel
- 3:58Device pixels
- 6:41What kind of pixels?
- 15:07JavaScript - layout viewport
- 15:44JavaScript - visual viewport
- 20:22Ideal viewport: 320px
- 22:42JavaScript - ideal viewport
- 29:08Min-width viewport
- 30:40Safari workaround
- 32:15Perfect meta viewport
- 32:27@viewport
- 34:35Even perfecter viewport
- 36:05Media queries -device-width
- 37:34Responsive design
- 39:28CSS units
- 42:32Resolution
- 43:22iPhone 3G
- 43:44Samsung Galaxy Pocket
- 44:24BlackBerry ZIO
related talks
57mMeta Layout: a closer look at media queries
35mModern CSS Replacements for Better Responsive Code
15mResponsive Design vs. Adaptive Design
24mDesign and Development Consideration for Dual Screen Devices
01h 01mThe Evolution of Responsive Web Design: What's Next?
33mResponsive Design in 2020
13mBreaking Out of Media Queries
43mResponsive Design, Past, Present and Future