Why use `*-device-width`

Question

I dunno if its right to post a similar question to a previously closed one. Its quite different so I thought I'd try.

Ok, *-device-width is to target devices (not rendering area) with a specific width. *-width is to target the rendering width. So when designing, won't I always want to target based on rendering area, if the device width is say 768 but the browser chrome (for example) takes up 20px of that, then won't scroll bars appear if I use *-device-width. So question is shouldn't I use *-width every time?

Suppose next time, tablets allow users to resize their browsers, wont my site be "unresponsive" if I use *-device-width?

Answer 1

You shall find a decent explanation at this link. Scroll down to about the middle of the page.