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?
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.
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?
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.
Mobiles
320px
480px
640px
Tablets
768px
1024px - landscape
Desktops
1124px
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?
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.
If I understand you correctly, you’re saying mobile Firefox implements max-device-width correctly and mobile Chrome doesn’t?
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.
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?