you are right. Css media queries are for viewport's resolution and some simple "media" types. Device type determination requires calculations on string (user agent). you cannot determine what devices are with css only. But a backend can. You can divide your app and serve seperate designs by user agent etc.

You're right, but often your problem is better served by a different strategy, because doing web design based on device type is kind of unsustainable.

Media queries combined with the viewport meta-tag solves your problem.

    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Using that meta-tag, phones will respond to media queries around 240-360 pixels, depending on their screen size.

I like to use bootstrap to not be bothered with media queries myself. But I only use small parts from bootstrap, and I opt-in/opt-out from specific parts by removing/adding includes to specific modules from bootstrap. (you can do that with the LESS or SASS version of the package, copy the generic "imports" file, and comment-out everything you don't want/need)

Bootstrap includes many sane defaults and some fixes for weird browsers. By choosing what to include and what not to include, I can choose whether I want bootstrap's opinionated styles or my own, and I can switch later (start out with bootstrap forms, customise them later & finally remove bootstrap form styles)