Images are appearing smaller in photoshop than on desktop/in browser and are distorted when uploaded

Believe it or not, everything is working normally.

To add to D_Fosse's answer, this is not only about Apple Retina displays. It works the same way for Windows and Android HiDPI displays. All use the same concepts of scale factors to compensate for higher resolution displays.

If images were shown without adjustment, images might become too small on higher resolution displays. The scale factor is a way to keep images looking a consistent physical size on displays of very different resolutions. Before Retina/HiDPI displays, everything was scale factor 1x: You made a 200 x 280 px image, it looked roughly the same size on all computer screens because they were all 96 to 120 ppi.

But Retina/HiDPI displays have two to three times the pixel density, making an unadjusted image look roughly 1/2 to 1/3 size. Web and mobile design assigns the appropriate scale factor to the code (e.g. CSS) for specific devices. Retina and a lot of Windows HiDPI (e.g. 4K) displays use a scale factor of 2x, so web browsers detecting a 2x display apply the web page coding for 2x: Blow the image up 200% so it looks the same size as on a 1x display. That's why when you take your 200 x 280 px image into a web browser on a Retina/HiDPI display, a screen shot of it measures 400 x 560 px. If it was a very high resolution screen like the iOS and Android smartphones exceeding 400 or 500 ppi, the scale factor could be 3x.

CSS code, like the code you showed in your screen shot, is specified in device-independent pixels (called DIPs, or points, or CSS Reference Pixels) at 1x. The browser will scale it to 2x or 3x depending on the screen detected.

But Photoshop does not apply any scale factors itself. At 1:1 magnification, an image in Photoshop always displays at one image pixel to one screen pixel. So 1:1 images in Photoshop look a lot smaller on Retina/HiDPI displays. The only solution is to be aware of the scale factor of your output device, and preview it that magnification in Photoshop. You will find that other photo editing applications work the same way.

If this seems weird and new, it is not. We have already worked this way for decades, for print. It is no different than if you’re looking at a 1800 x 1200 image at 1:1 magnification on a 96 ppi screen, and then you include that in a 300 ppi print job, it will appear roughly 1/3 as large in print, because the final output resolution is roughly 3x the display resolution. It's the same principle, display ppi vs output ppi. Now that display resolutions have entered the range of print resolutions, that discrepancy in size now affects us when we’re not printing, just displaying on screens of very different resolutions.

Photoshop displays it correctly.

You have a retina screen, and most consumer-oriented web browsers and image viewers then scale the image up to 200%, so that it displays at the same screen size as people are used to from traditional screens.

It's the accepted industry workaround for retina screens, ensuring that any material can be displayed on any screen.