The Mobile Viewports - Understanding Layout, Visual, and Ideal Viewports

Dive into the complex world of mobile viewports in this comprehensive 52-minute conference talk from CSS Day 2014. Explore the three types of viewports - layout, visual, and ideal - and understand their significance in web development. Discover why responsive design works, the effects of setting meta viewport, and common browser pitfalls. Uncover the truth about resolution and device pixel ratio (DPR) as speaker Peter-Paul Koch, an expert in mobile viewport technology, provides in-depth insights and answers to crucial questions. Learn about device pixels, JavaScript viewport interactions, ideal viewport concepts, meta viewport techniques, media queries, responsive design principles, CSS units, and resolution across various mobile devices. Access accompanying slides and additional resources to enhance your understanding of this essential topic in modern web development.

Intro
A pixel is not a pixel
Device pixels
What kind of pixels?
JavaScript - layout viewport
JavaScript - visual viewport
Ideal viewport: 320px
JavaScript - ideal viewport
Min-width viewport
Safari workaround
Perfect meta viewport
@viewport
Even perfecter viewport
Media queries -device-width
Responsive design
CSS units
Resolution
iPhone 3G
Samsung Galaxy Pocket
BlackBerry ZIO