TargetDpi alternative for android webview

Question

I have been searching for two days now for a solution and nothing has really worked for me. I was wondering how I would go about changing the size of text in a webview for Android in relation to screen resolution. Since targetdpi from viewport no longer works, how can i solve this?

Answer 1

I don't have an Android device to test this on, but you should be able to do this with CSS media queries, e.g. within your CSS file.

jsFiddle Demo

p {
    font-size: 14px;
    color: #c00;
}

@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    p {
        font-size: 16px;
        color: #0c0;
    }
}

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi){ 
    p {
        font-size: 20px;
        color: #00c;
    }
}