Screen resolution is, more or less the best approach. Layouts need to fit a size, not a device, so that's why media queries based on the screen size are usuall

Screen resolution is, more or less the best approach. Layouts need to fit a size, not a device, so that's why media queries based on the screen size are usually the best approach. If I resize my browser to make it smaller, I should get a layout to match that. If I'm using Safari on iPad, docked to the side of the screen, I should get a layout to match that. These are all about screen sizes, not "mobile vs desktop". For testing interaction cabailities, there are the @media (pointer: coarse) and @media (hover: hover) media queries for testing touch vs mouse, and hover capabilities, but it's important to not rely on these for mobile vs desktop layouts otherwise tomorrow a MS Surface user will post "Just because I have a touch screen, doesn't mean I'm on a phone".