Search code examples
htmlcssopera

Browser is scaling page to 125%

I have a display with resolution 2560x1440. I have noticed that web page I am working on is scaled to 125%. So if border is set to 4px - it has 5px on the screen. It happens in Opera, Chrome, Firefox, but not in Edge.

I assume it is related to Windows font size settings (which is set to 125% on my computer).

How to disable this feature using CSS code (or in meta tag in head?) or at least in browser settings?

Sample code: 

<html>
    <head>
        <!-- it does not change anything -->
        <!-- <meta name="viewport" content="width=device-width, initial-scale=1"> -->
    </head>
    <body>
        <div style="width: 10px; height: 10px; background-color: red;"></div>
    </body>
</html>

Results:

Browser scaling

Solution

  • Finally I found an answer.

    For Firefox: https://stackoverflow.com/a/24958483/6552578

    Chrome: https://productforums.google.com/forum/#!topic/chrome/_jmREHlt3ZE

    Solution - need to edit desktop link to Chrome like that:

    "C:\Program Files\Google\Chrome\Application\chrome.exe"  /force-device-scale-factor=1