CODEWITHSUNDEEP
htmlcssgoogle-chromefirefox
johannchopin
johannchopin

Reputation: 14844

font-size difference between chrome and firefox using rem

I work on a web project with Bootstrap and I have some trouble with font-size.

Try to run this HTML snippet in chrome and then in firefox with an mobile view like iPhone 7:

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
        integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

    <style>
        html {
            font-size: 40px;
            font-size-adjust: none;
        }

        h1 {
            font-size: 2rem;
        }
    </style>

</head>

<body>

    <div>
        <h1>
            test
        </h1>
    </div>

    <button type="button" class="btn btn-primary">Send</button>

</body>

</html>

You will see that in the firefox mobile view the font size is much larger than under chrome. However I initialize well the font size of <html> to a pixel value (here 40px) and then I only use rem has font size values (bootstrap also use rem values for the font size).

Why is the rendering so different?

Upvotes: 2

Views: 1735

Answers (1)

lost faith in stackoverflow
lost faith in stackoverflow

Reputation: 300

Edit

This is pretty annoying.

On Firefox, 40px = 40 desktop-sized pixels, does not respect your emulated device.

Not sure what Chrome does, but in a 667px window set to iPhone 6(1920px), 40px = ~17px.

Responsive designs can mitigate these issues.

If responsive designs are a no-go, set font size based on vh, instead of px.

        html {
            font-size: 10vh;
            font-size-adjust: none;
        }

Old answer

On my machine, the snippet is the same size on both browsers in mobile mode.

Have you altered your zoom factor? This will change the size of rem/em.

It's possible that your OS' DPI settings could change this, too.

For consistent sizing, use responsive designs, such as flex boxes and the % css unit.

Upvotes: 5

Related Questions