Which size to use for mobile breakpoint? Pixel size or viewport size?

I'm trying to decide on the size of our mobile site graphics. I came across this set of data while researching:

For iPhone XR:

Pixel Size: 828 x 1792
Viewport: 414 x 896

As you can see, the pixel size is twice the viewport size.

So which one should I use as my mobile breakpoint? 818 or 414?

How are these two sizes different anyway?

I'm very confused.