I created a simple application using Phonegap for android that just downloads the contents of my site. The problem is that the webview does not understand the “REM” units, although on the same device, when I open the website in the Chrome browser, it works as expected.
The method I use is to set the root font size in pixels (e.g. 1px) and everything else using rem units. It seems that when using webview it has a minimum value for the font size, which is much larger than my value, and it multiplies all element sizes by 10-12 times.
Is there a way to fix this without switching to pixels instead of edges?
Code example:
body {
font-size: 1px;
}
.element {
width: 15rem;
}
From the above code, the element width should be 15px, which is correct if I open the site in a mobile browser, but in the webview it is more than 150 pixels;
UPDATE
I am pretty sure that it has a minimal font size problem in webview, because now I tried the opposite, I set the root font size to 15px and .element to 1rem and it shows everything correctly, it means REM units work if I set the font size root is above the minimum limit in web browsing.
This is how my site looks in mobile chrome [ 
]
Here is the phonegap application
source
share