Tablet's scaling my web page by 1.5x causing layout issues

Question

So I have a web app that looks perfectly fine at 1024x768 pixels on a laptop (I really don't care about phone at the moment). However, when I take the same app onto a tablet it doesn't fit even though the pixel availability is way higher than 1024x768. It turns out that the tablets are scaling my app so it uses a 1.5 x css pixel multiplier causing it to be much larger on the tablets.

I have the following in my html head:

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

But it still scales the web page. This code seems to me that it would set the initial scale to 1.0 so that css pixels == hardware pixels, but it doesn't. I'm not really in a place to use full responsive design for this. I just need to have tablets stop scaling my values for me. How can I get this fixed?

Answer 1

I believe this is what you might be looking for

body * {-webkit-text-size-adjust: 100%; }

read here for the documentations https://developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust

Answer 2

You're falling victim to the CSS pixel ratio: http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density of your device. Each device has a scaling factor applied to css. For example, the ipad mini is a ratio of 2.

There are ways to query the ratio in CSS, but it is not recommended according to Mozilla.

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries#-moz-device-pixel-ratio

 @media (-webkit-min-device-pixel-ratio: 2), /* Webkit-based browsers */
   (min--moz-device-pixel-ratio: 2),    /* Older Firefox browsers (prior to Firefox 16) */
   (min-resolution: 2dppx),             /* The standard way */
   (min-resolution: 192dpi)             /* dppx fallback */