Search code examples
web-applicationsscreen-sizegalaxy-tab

1280x800 on Galaxy Tab differs from 1280x800 on local environment?


Currently we're developing a new Web Application. Customer says that it should support at least 1280x800 and above. On local environments it looks fine and it fits. But when I browse it on Galaxy Tab, the 1280x800 website doesn't look like a website running on 1280x800. On Galaxy Tab the website is truncated although the hardware setting of the Tab says that it is 1280x800. So the website is too big for 1280x800.
I know that you have to care about different screens and densities when you write an Android application, but we are talking about a website and not an Android application and I'm not sure what causes this behavior. Can anybody explain to me what's the reason for that?

[UPDATE]

Screenshot of Firefox (correct)
enter image description here

And now in Galaxy Tab (truncated) enter image description here


Solution

  • You could try adding this to the <head> of your HTML document:

    <meta name="viewport" content="width=device-width, initial-scale=1">
    

    The reason why this is needed is that high-DPI devices do not translate CSS px to screen pixels by default because most content is optimized for low-DPI screens and would be just too small to read. Another way to think about this is that, on these devices, websites are initially scaled by a factor of 1.5 or even 2. By giving the specified <meta> tag you can override this behavior and set the initial scale to 1.