Question

maybe that problem is simple, but I have no Idea how to solve this, and also no real Idea what I should type in to google 😉

In my CSS I have the following declaration:

body { font-size: 100%; }

No, because the new high-density devices show my fonts very small, I want that declaration to be set to something like:

body { font-size: 200%; }

What is the simplest way to do this, without creating/linking additional files or doing some serverside-processing of the user agent?

Answer 1

Use a mobile browser detection (either server-side or client-side). You can find this at http://detectmobilebrowsers.com/. If the browser is mobile, add the class mobile to the body tag.

E.g. if you use the jQuery code from Detect Mobile Browsers:

$(document).ready(function()
{
    if(jQuery.browser.mobile)
    {
        $('body').addClass('mobile');
    }
});

Then, in your CSS, you can use body.mobile {} and .mobile .something {} to apply mobile specific styles.