If fonts are set on various elements in px then it may not work (that's the only time I've seen issues with this).
My fonts are all set in em but I got it to work by changing max-width to max-device-width. Is there a difference or should that be OK?
I found this which seems to suggest using 568px:
I also noticed the page above uses min-device-width in addition to max-device-width but that isn't necessary for what I'm doing, is it?
I can't speak for all phones, but phones like the iPhone still obey rules like width: 320px even though they pack in far more pixels than that.
The page above mentions "Device-pixel-ratio" which confirms what you said. It sounds like these pixel measurements aren't so much pixel measurements as they are screen size designations.
Thanks a lot for your help, I think this will help a lot when using the same site for desktop and mobile. Any other optimizations to consider for devices like phones with small screens?