Example:
Samsung galaxy S7 - 5.1 inch, 1440 x 2560 px - smartphone
Acer Iconia Tab A500 - 10.1 inch, 800 x 1280 px - tablet
If I set @media screen and (max-width: 480px), this should recognize a smartphone. How can that be possible if a the tablet has a lower resolution.
Do media queries measure something else and not the real resolution?
The unit px in CSS is a reference pixel, not a physical pixel:
The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).
(Cascading Style Sheets Level 2 Revision 2 (CSS 2.2) Specification, section 4.3.3. Lengths)
Commonly, 1px is one physical pixel on devices which have a "standard definition" pixel density of around 90-120 pixels/inch. Desktop browsers tend to keep 1px equal to what they believe to be one device pixel.
How many device pixels correspond to 1px depends on the pixel density of the device and the magnification level. At the default magnification level
<meta name="viewport" content="width=device-width,initial-scale=1">
the S7 uses about 3.5 device pixels for 1px.
To distinguish devices with high pixel density you can use
@media screen and (min-resolution: 2dppx) {
/* This is a high-dpi device */
}