Today I discovered a bit of a quirk on mobile browsers which I hadn’t heard of before – Font Boosting.

Basically, it appears that for desktop sites displaying on mobile devices using a portrait resolution, webkit attempts to help out the mobile user by scaling up text to a legible size. That way the user doesn’t have to zoom in and out and pan left and right. Makes sense and helps the experience be a bit more legible for the user who just wants the information asap right?

Not as nice for developers who have their pristinely designed desktop site suddenly spasming with randomly large font sizes!

Luckily, as always, there are solutions for this. If you need to have a non-responsive site display nicely on mobile, try the following:

  • Set the max-height to a larger value than the block itself. You can put this on the block that contains the text or its parent or grandparent. This disables font boosting:
  • You can also give your element a set width and height.
  • Others have suggested using:
    <meta name="viewport" content="width=device-width, initial-scale=1">

    so maybe give that a go too!

For more info, Font Boosting:

I’ve decided it’s time for me to start getting back into photography. Apart from the many rather enjoyable filmings for Meri Amber music videos, the camera has actually been quite idle and untouched!

So this month I’ve decided to embark on a quest to take photos every day and choose my favourite one each day to post up online.

So, to get this photo party started, here’s my first one!