I have a website (extranet application) built for 1920px wide screens, as it needed a lot of info showing at the same time and desktop displays featuring that resolution are readily available and cheap.
The customer now wants to buy a tablet to be able to use the website while on the road. Of course we were happy to see that the new lines of tablets (e.g. Samsung and Apple) have resolutions that go way beyond that. However, I did a few tests on those tablets in a shop and it all seems like those advertised display resolutions are a scam, as they won't show more than 907px wide.
I know how Apple sold they retina screens... but you can't explain why all tablet brands can now start selling tablets advertising with higher and higher resolutions while websites in a browser will never be able to show more than the default low resolution we're all accustomed to.
Is there any way to make the browser on a tablet support the full resolution as advertised? As in a div 250px wide not taking over 1/4th of the width of the screen whatever you do!
The customer will buy whatever does the job, so no preference for Android or IOS.
After a whole day of testing I finally figured it out.
As the pixel ratio kinda zooms your page you need to zoom out, but it seems that by default it won't allow you ever to zoom below 1x. So I added an initial-zoom of less than 1 to the meta viewport tag giving you full control on how far back you want to zoom out, countering the pixel ratio browsers implement.
<meta name="viewport" content="width=device-width; initial-scale=0.4;" />
Of course this is not directly suitable when using on various devices, as the zoom level will always be different... but as I mentioned in my question, it's an extranet application.
Maybe there's a way of solving that as well, making the solution perfect. I'll gladly accept that answer as "preferred" then.