why 1px seems larger on retina display?

I encountered this issue the 1px border looks 2px on retina display, I know it's something related to devicePixelRatio, but still don't get WHY.

And if 1px looks 2px on retina display with a devicePixelRatio of 2, why the 200px*200px image doesn't look like 400px*400px?

Any my second questions is, if I draw a box with width of 375px on iphone 6(375*667), it only takes half of the screen. Why?