As a developer from time to time you come up against issues that have not been documented and can take hours to find a fix for. Unfortunately we recently encountered such a scenario and felt it appropriate to document the solution to help other developers in the future.

HTC Wildfire Broken

As the mobile development landscape is so diverse there are a number of issues that still arise thanks to every mobile platform moving in their own direction with no solid standards being adhered to. Some mobiles have different browsers and different versions of browsers. Take the HTC Wildfire, which runs a custom webkit based browser. From a developers viewpoint this can cause a host of issues.

The problem we encountered was with a mobile specific website that uses the Meta Viewport tag, which isn’t implemented correctly across all devices:

Our Viewport Tag:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">

This works fine on the iPhone and most smartphones, but the HTC Wildfire rendered everything with increased zoom.

Fix the viewport on HTC Wildfire

This was a little more tricky as the device DPI is so low and there isn’t a great deal of documentation on-line about rendering websites in the HTC Wildfire. After a few hours of playing we came up with this:

@media screen and (-webkit-device-pixel-ratio: 0.75) {
/* CSS for low-density screens */
body { zoom:0.82; }
}

This fix appears to re-adjust the zoom to cater for the low density pixel ratio. It’s a good thing that media queries in CSS have been introduced or this would be impossible to fix.

The Finished Code:

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
<style type="text/css">
@media screen and (-webkit-device-pixel-ratio: 0.75) {
/* CSS for low-density screens */
body { zoom:0.82; }
}
</style>

HTC Wildfire Viewport Fixed

As you can see form the screen-shot to the left this worked a treat, you may want to tweak the zoom and font size in the CSS media queries to fit your design perfectly.

On the first screen shot you can see the text being cut off the right hand side of the browser, the images being cropped off the screen and the bottom navigation missing an item. Once the zoom is fixed it renders as expected.

If you’re a developer then hopefully we have just saved you some time and more importantly frustration!