I've been using the following to increase certain font sizes on phones.

@media only screen and (max-device-width : 720px)

It works on every phone and browser I've tried except Firefox on Nexus 4. It does work on Chrome on Nexus 4 as well as Firefox on Galaxy Nexus. If I increase it to 768px it works on Firefox on Nexus 4 but I think that will trigger iPads too.

Has anyone found a good way to target only phones?

ralphm
—
2013-08-27T08:18:07Z —
#2

As an aside, it's better to use max-width rather than max-device-width, but anyhow, are there really phones that huge? I can't image a phone with a declared screen width of 720px.

tonearm
—
2013-08-27T10:27:09Z —
#3

I found a chart of a bunch of devices and their declared widths a while back and I decided on 720px based on that. I can't seem to find it now.

Why would Chrome trigger at 720px (surely also lower) and Firefox doesn't trigger until 768px on the same device?

chris_upjohn
—
2013-08-27T12:24:02Z —
#4

max-device-width is based on the phones native resolution whereas max-width is based on the total available room the browser has to work with, typically 640px is the maximum width of a standard smartphone in landscape. From my experience working with media queries the below are standard breakpoints.

Mobiles320px480px640px

Tablets768px1024px - landscape

Desktops1124px

tonearm
—
2013-09-01T07:03:03Z —
#5

Using max-device-width, I'm not sure why Chrome would trigger at 720px (probably 640px actually) and Firefox doesn't trigger until 768px on the same device. Do you understand why that would happen?

chris_upjohn
—
2013-09-01T23:42:10Z —
#6

This is due to the max-device-width implementation within the browser itself, as I said above this is based on the device's native width which Firefox implements correctly, max-width will work on any device as it's based on the total available room that the browser has from its internal application edges.