手机字体大小问题

Question

I am making a responsive site and I can't figure out how to solve the problem with mobile devices with high dpi. I have set my h2 to 2em and my p to 1 em, so the h2 should be twice the size of the p, right? Well they're pretty much the same size when I'm in portrait mode on my Galaxy S4. It looks better in landscape for some reason. I also noticed by using a javascript that shows the width of the viewport that the galaxy s4 is always 980px wide, both in landscape and in portrait, isn't that weird?

I am using

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

But I'm not sure it's working properly.. since the viewport is 980px wide on my S4 in portrait, the breakpoints one would normally use for mobile doesnt work. My phone thinks it's a tablet!

I have googled a lot but nothing seems to be working. Does anyone have any tips or know where I'm messing up?

Thanks!

Edit: I tried

@media all and (min--moz-device-pixel-ratio: 1.5),
    (-webkit-min-device-pixel-ratio: 1.5),
    (min-device-pixel-ratio: 1.5)

which worked, I can now set a seperate media query for all devices with higher pixel ratios. But the font size of my h2's is still weird. I have to set it to 4em to make the h2 approximately twice the size of the 1em p in portrait, but in landscape it is much bigger. what's with the font sizes in portrait mode on my phone?? :S

Answer 1

Not sure it'll help but I usually use:

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

also remember that em's are relative so depending on where you set the actual font size, em's take on different values (so if your body is set to font-size: 14px your h2 would be 28px font, but if your h2 is in a container which has font-size: 16px the h2 would be 32px)

Added:

Dunno about using em's for breakpoints...I've always used fixed pixels. And make sure you include device-width. EG for tablet-specific styles:

@media only screen
and (max-device-width: 979px),
(max-width: 979px) {

Answer 2

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