tonearm — 2013-08-27T03:31:50-04:00 — #1
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-27T04:18:07-04:00 — #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-27T06:27:09-04:00 — #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-27T08:24:02-04:00 — #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.
1024px - landscape
tonearm — 2013-09-01T03:03:03-04:00 — #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-01T19:42:10-04:00 — #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.
tonearm — 2013-09-02T06:09:53-04:00 — #7
If I understand you correctly, you're saying mobile Firefox implements max-device-width correctly and mobile Chrome doesn't?
chris_upjohn — 2013-09-02T06:49:17-04:00 — #8
That's correct, I've come across the same issue on both iOS and Android devices with Chrome/WebKit browsers (not Safari) but Firefox never seems to have an issue.
tonearm — 2013-09-03T03:40:26-04:00 — #9
What makes you sure that it isn't WebKit that is using the correct device-max-width and Firefox that's doing it wrong? Are official max-device-width specs for various devices published online?