We have pages today on mobile that are broader than the viewport or that have elements that are smaller. The long run goal should be to eliminate them all and there's couple things that will help us reach that goal:
- Emulate mobile view on desktop preview page T85587 to make it easier for users to know what it looks like on mobile
- Fine tune the CSS to make sure it doesn't happen
- Use a tool in CI to find these pages. Use the same tool on production to find the pages and fix the problems.
One thing that makes this more complicated is that there are problems that we can find with PhantomJS/Chrome emulating a mobile phone, and some where we need to test on real devices.
Here's a couple of examples of what it looks like today:
Barack Obama landscape mode - some elements full width some half
Barack Obama portrait mode - some elements are to wide so we can scroll horizontal
Bounty (only Safari iOS) - there's elements that totally makes the width wrong
A good start would be to find a tool/create a tool that can find these issues and try to get a feeling on how big the problem is.