These breakpoints are entirely based on the pixel width.
With the growing screen resolutions on mobile there's no guarantee every device will map to the named breakpoint for that type of device. Some "phones" might match "tablet" for example.
I believe Chrome and Firefox both offer development tools that allow switching to known mobile page resolutions, it's probably good enough to test any CSS using those breakpoints.
Personally I don't rely on those breakpoints as a device resolution, it's just the Flarum naming for the various Flarum layout breakpoints. Most important is the change from @phone
to @tablet
, as it's the point where Flarum layout changes the most, with the sidebar moving to the header, dropdowns opening above the page and the hamburger menu appearing.
If you design your extension to be "mobile first", then you should focus on making it work on the @phone
breakpoint, and only then add more CSS for larger-screen-specific improvements if needed.