I have a website using a meta tag <meta name="viewport" content="width=device-width, target-densityDpi=device-dpi">, Javascript, which formats css bodyto increase the width and height of the screen, as well as the elements inside that have a percentage width.
On the desktop, this works fine. However, on my Android phones and tablets, the content does not scale properly - everything is too small, and double-clicking to zoom in increases the size to the desired size (until it displays the entire width of the page). This happens both in portrait and landscape modes, and the zoom level is identical or, at least, similar.
I got a warning that javascript has a formatted body width and height, and this is always correct, but the browser feels the need to load, as if the window size was actually larger.
I understand there is some kind of stupidity when browsers get confused between CSS pixels and real pixels, but I thought that the meta tag there should fix it all.
So, how do you get the browser to load the page at the real 100 percent screen size, rather than some ~ 125% size?
source
share