force same font size on every mobile device

Question

I would like that my site works like the mobile page of facebook. It is independent what the screen resolution is, the navbar etc. are always the same size. How can I achieve this?

This is how I want it on all devices LG Optimus Black (480 x 800 pixel)

This is how it looks on my Lumia 920 (1280 x 768 pixel)

Answer 1

You will have to use Javascript for this. Here's a jQuery approach:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
    $('body').addClass("mobile");
}

Then you can style appropriately, eg:

.mobile div {
    width: 100%;
}

CSS media queries will only get you as far as detecting screen size or orientation. There are some but compatibility is an issue.