There’s a great function on Chrome that can help iron out your css website views for mobile devices.
If you work on your own, it can be hard to cover all the bases that a large web company would have a team to do. So the browser developer tools can become your best friend. There’s no replacement for testing your website on actual devices, but there is a way of finding out in general if you’re heading in the right direction.
I’ve been working on the layout for my Blog page, using a simple responsive column layout and everything looks fine and dandy on my desktop screen browser.
But on my iphone 5 everything has shifted to the left so that there’s a horrible space to the right.
Enter Chrome’s Developer Tools:
a) Download the most up-to-date version of Chrome.
b) go to the url in the Chrome browser
c) click View->Developer->Developer Tools and hit return
d) Now choose your preferred device from the dropdown at the top left, and off you go.
There are several different options for popular mobile phones – iphone, samsung galaxy, google nexus and the like – as well as landscape and portrait ipad simulations.
In this case my nasty little problem was a home link on the banner with wide screen css formatting. Being able to see the simulation and work through the possible faults really sped up the process. Once it was fixed on the Chrome Developer, I was able to check it on my iphone and found that all was working well.