100% view in PS shows double sized in browser.

[MQLiu]

Left side is my PS artboard, while the right side shows how it looks in my browser.

As shown the 24pt-sized "FÖRBESTÄLLNING" text shown in my browser on the right side is as big as the 48pt one in PS on the left.

I read the year 2013 posts which might be related on this topic, but couldn't get a clue...I could accept doing all the editing with 200% view in Photoshop, until I noticed the pictures finally shown in browser are not as sharp/crisp as in PS.

I'm no professional with neither PS nor monitor resolution etc. I don't think I have a retina screen, or do I? I'm currently using a Microsoft Surface pro 4. It doesn't show size difference on my other laptops though.

From what I understand is that my monitor is so sharp that I need the 48pt sized text to fill in the 24pt space to get the same sharpness, but as long as I have the 48pt on a webpage, the browser doesn't squeeze it into a 24pt space, it shows it in double sized area.

How can I solve the problem? Anyway as long as it's crispy and sharp in browser.

[D Fosse · Accepted solution]

You're absolutely right, it is double size in your browser. This is because you have a high resolution screen (retina is just what Apple calls it). The higher the screen resolution, the smaller everything displays on it.

To compensate for this, and avoid a rush of customer complaints, web browsers and image viewers scale the image up by a linear factor of 2. IOW one image pixel is represented by four screen pixels. The applications do this automatically when detecting a high-resolution display.

Photoshop can't do that because it's a professional-grade image editor, and it has to display accurately and correctly.

[MQLiu]

Thank you for your reply.

So there isn't anyway to make my browser display the same as in PS? or the other way around?