14. April 2012 22:17
by Daniel Harris
I had a frustrating evening this evening. A site I had designed and built looks good on the desktop, but when viewed on mobile devices, some images were overlapping the text.
In my mind all I wanted to do was force the iPhone browser to show the site at it’s full width, without attempting scale anything.
This was frustrating because the site was built to a fixed width, all I wanted to force on the iPhone was for it to show the site at it’s correct full width, with the user having to pan around the view text, and scroll horizontally.
This particular site doesn’t have a specific mobile version, and there wasn’t the budget in the project to create one at this time.
I mistakenly thought the browser was somehow ignoring the width I had set, but what it was actually doing was resizing the text.
The simple solution was to prevent this from happening with the following CSS:
This solved the problem immediately.
I had also been playing around with the viewport meta tag, and in the end did use this to send an initial-scale value to try and give as optimum as possible initial zoom level for mobile device users.
After this experience I will in future pay closer to attention to testing in a mobile browser when building websites for clients. And if the design is particularly unsuitable for mobile devices I will offer to the client to quote for a mobile optimized version as an extra where necessary.
The simple CSS above will surely save me plenty of hair pulling down the line.