dreamweaver Mobile device widths

[typographie]

I'm trying to design a mobile version of an existing website. The problem I'm running into is how to preview changes I've made. I'm using Dreamweaver, and it has a list of preset mobile device dimensions, but they don't seem to make any sense. For instance, the iPhone 6S Plus preset is 414x736, yet that's a 1080p device. So if I size an element to fit the way I want at 414x736, it's tiny when I actually load it up on a real device.

 

Worse, my CSS link is

<link href="mobileStyles.css" rel="stylesheet" type="text/css" media="only screen and (max-device-width:799px)" />

.. and the confusing part is that works perfectly, even on the 1080p iPhone 6S Plus. So clearly there's something I don't understand about the screen resolutions of mobile devices, and it's making it very awkward to preview changes being made to my site as I work. How do more experienced web designers get around this issue, and is there a way I can use Dreamweaver's mobile device presets so that they actually mean anything?