Stop trusting browser-based preview tools for responsive design

Last week I spent 4 hours debugging a layout that looked perfect in Chrome's device toolbar but broke completely on an actual iPhone 12. The toolbar doesn't account for Safari's address bar or notch, so your padding at the bottom gets eaten. Has anyone else had their design fall apart on real hardware because of this?

2 comments

Log in to join the discussion

Log In

2 Comments

the_zara4mo ago

Yeah the address bar always sneaks up and steals your padding for sure.

8

felix_thomas734mo ago

Did you end up rebuilding the whole thing after that, or just patch the padding? I'm asking because @the_zara mentioned the address bar sneaking in, and I've had to go back and redo entire sections with fixed heights that just get eaten up by the browser chrome. What was your breaking point before you called it a day?

1