In my opinion, we need to explore some aspects of the history of the monitors and displays.
The early digital images were made of really big picture elements, pixels, because of the poor processing power.
As processing power evolved, you can process more pixels on a screen, therefore, less noticeable.
Standarization of the "pixel dimension"
At some point, the pixel size was good enough, so more pixels could be used now for bigger screens, maintaining somehow an average pixel density, (how many pixels were on a physical unit, an inch).
One example is that you could find for example computers using, let's say, 800x600px on a 15 inches monitor or 1024x768 on 17 inches ones an improved system.
This would be the times when Windows defined its resolution to be 96 PPI as being superior to the 72 PPI defined by apple on the earlier Apple systems...
All this time the pixels were just projected on cathodic ray monitors; in an analogic way, they were not an intrinsic part of the monitor, of the display.
Pixel as hardware
Then the digital displays came into the game. Plasma and LCD monitors had a specific native matrix of display elements.
Now the minimum size of a displayed element of an image was defined by the actual size of this display elements. Where the projection of the pixels once defined the resolution now they were defined by this display elements.
The term pixel was already established. No new term was invented for this digitally controlled display elements... And the confusion started.
The CSS specification started when the displays were still CRT based, and on a time when the pixel density was more or less stable.
So using px as a unit was a reasonably good idea. In fact was a better idea than the previous one, using the "Medium unit". This unit was defined by the browser alone, to whatever the developers considered "medium". To prevent this discrepancies, people used more and more the unit px which was stable enough.
More processing power
As miniaturization of the components made portability a reality, this extra power was not used only for bigger displays, now were used for the original usage... more definition using smaller pixels.
As a marketing strategy, Apple uses the retina display concept to emphasize the resolution using small display elements.
But as you reduce the pixel size you can not use it to define text size, because your text would be tiny and unreadable.
More ingredients to the salad
There are different "pixels" involved now. The display elements, the actual digital picture element in the case of images, and the px CSS units.
To solve this we add more ingredients to the salad... 2x and 3x assets, real pixels and declared pixels...
Now the answer to your question
A phone (or screen) needs to declare to the browser a pixel size, to be used as a reference for the CSS units.
This is the smaller unit. 375px in this case. This unit is the one used to define for example the text size and the images size to be displayed on the screen.
And this is the real capacity of the screen due to the physical dimensions of its display elements. Normally it is a FullHD screen bigger or smaller in physical size depending on the model.
This resolution is greater than the declared one, and this extra power is used to render more definition to text, and behind the scenes to pull a higher resolution asset... a 2x image or a 3x one.