1 of 13

Stop Resizing

Your Browser Window 🛑

Improve testing for responsiveness ✨

Jen Chan. JS Lightning Talk 2024-04-30

2 of 13

whoami 😱

Software journeyperson
Human companion to a cat
Building front ends since 2016
Learning and building things with people 💖

3 of 13

4 of 13

Browser resizing won’t account for 👇🏻

Viewport height
Zoom level
Touch event emulation
Orientation
User agent strings
Device pixel ratio

5 of 13

1:4

2 DPR

1:1

1 DPR

6 of 13

@media screen and (min-width: 320px)

and (max-width: 600px) and (orientation: portrait) {

…

}

Device resolution

750 x 1336px

CSS pixels

375 x 667px

326ppi

DPR: 2

2x density

7 of 13

⚠️ Reflow and re-renders

❌

Resizing in responsive mode?

Inadequate for components with listeners

8 of 13

Example: Wayfair’s Bed and Bath Category Page

Device Specs:

Macbook M2

Resolution: 3024 x 1964

Chrome 124.0.6367.62

Device Pixel Ratio: 2

9 of 13

10 of 13

Device Mode on Chrome Devtools

11 of 13

Even more convenient… Responsively

12 of 13

Automate visual regression testing

(if your company will let you)

13 of 13

Thank you 👏

No more 🙅🏻‍♀️

jenchan.biz

🕊️

❌

🗑️

https://tinyurl.com/stop-resizing