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.
Potential solutions:
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?
i generally only use chrome … and then i check it out on my iphone 4s and my Htc mobile and only have a problem on iphone if i forget to do vendor prefixing for things like flexbox… which i have to do for last 3 versions or else errors show up on iphone … other than that i find im fine
Unfortunately, I’ve found that the best free way to test responsive websites is by actually using your site/app on actual devices. I’m that person who will send out links to friends asking them to let me know if anything at all looks weird (with screenshots provided if they’re willing). Most of my friends/family have gotten used to this by now.
I came across this before: http://responsivetest.net/ but I’ve yet to actually compare it to actual devices.
Yeah, I’m getting the feeling that short of paying for a service that tests on real devices the only reliable option is to test it on real devices as you do. The frustrating thing is this makes it less convenient to catch problems as soon as you write the code.
The problem I had was using a background-image with background-attachment: fixed to achieve a parallax effect. It turns out that this doesn’t work on iOS; there is a lot of talk about this and related problems on stackoverflow and elsewhere. Vendor prefixes don’t seem to solve it, so after trying various workarounds I opted just to change background-attachment to scroll for all devices in iOS size range using a media query.
Thanks for the tip about vendor prefixes though, I’ll bear it in mind next time.
@Diego_Perez Nice find! I had come across crossbrowsertesting.com but didn’t know it was possible to use it for free when accessed through codepen. I signed up for codepen just in order to try it out and it caught my bug! Once you’re in it is also possible to use a non codepen url. EDIT: On second looks it seems that the site intends the free version only for testing pens; although it is possible to test other urls it may be best to stick to only testing pens unless you get a free trial/paid account. They have a wide variety of devices on which we can test.
I use Browser-sync, a command line tool for local server debugging/testing it’s on npm. https://www.browsersync.io
It refreshes and injects code into all browsers and you can connect mobile devices through your net.
)
.