Committed to responsive design, you use chrome’s built in device mode throughout building your page. It looks great so you go ahead and publish your new work, only to find that when viewed on an actual device bugs appear!
This is what happened to me with my portfolio page. I’ve now tried nearly 10 different sites which provide similar tools to chrome, but none display the same as on an actual device.
mobile1st.com is the only solution I’ve used so far that actually catches the problem on my portfolio page. They claim to be using actual mobile devices for testing, and they have a comparison (sales-pitch!) of chrome devtools simulator and their service here: https:mobile1st.com/why-chrome-devtools-is-inaccurate-for-mobile-testing/. There is a free-trial but it only allows you to test 5 urls.
Xcode apparently includes a facility for testing pages on iOS devices from your laptop. If this works it would only be a solution for iOS devices and for those who program on a mac; I haven’t verified if it catches my bug yet. EDIT: I just tried Xcode and it caught my bug! It allows you to choose from multiple different apple devices on which to test your site. More here Getting Started in Simulator.. This should be useful if you program on a mac and want to check your site on iOS devices.
Does anyone know of a better (free!) solution? What do you do to ensure that your responsive design works as expected on real mobile devices?