CODEWITHSUNDEEP
cssresponsive-designfont-sizemobile-websiteviewport-units
HelloWorld
HelloWorld

Reputation: 190

Font-sizing vw buggy on mobile Chrome

I am developing a website with slightly different CSS code for desktop and mobile. On mobile I use vw units for responsive font-sizes, which is preferred over media queries as mobile screen sizes change every other year and a different approach would require me to update the media queries as well every time.

Now, I think I have found buggy behaviour in Chrome mobile when it comes to font sizes with vw.

I kindly invite you to check out these two pages on mobile, both with Firefox and Chrome: http://gusto-gelateria.al/

http://gusto-gelateria.al/ice-cream-recipes/

Firefox is correctly showing the font-sizes as i expected, while on Chrome:

Am I missing something here, or Chrome doesn't handle well vw?

If this is not an obvious coding error I did, I may file a bug, but I want a confirmation before doing it.

Take as an example this vw declaration for the footer:

footer address div {
    display: block;
    font-size: 3vw !important;
}

That declaration appears in both browsers' dev tools as well, so it is being rendered both on Firefox and Chrome, but apparently they interpret it in different ways.

As I said above, my CSS for mobile is different than on desktop, so for inspecting it you should use the mobile device emulation from the browser dev tools (for Chrome see https://developers.google.com/web/tools/chrome-devtools/device-mode/ )

Upvotes: 1

Views: 1269

Answers (2)

paulmccann
paulmccann

Reputation: 81

The font-size difference is likely Mobile Chrome font-boosting. Elements with dynamic height get boosted automatically. A solution is to give the element or parent a max-height:

.parent {
    max-height: 999999px;
}

But it's probably best to apply that max-height directly to the element containing your text so it doesn't effect anything else you might be doing in your layout. Test it on a real device, since Chrome's Dev Tools doesn't show the boosting.

Upvotes: 1

David Taiaroa
David Taiaroa

Reputation: 25495

I believe that the root of your problem is that you don't have a viewport meta tag in the head of either of your pages. Without this, the default behaviour of browsers is to scale the page to fit the screen.

Start by adding the viewport tag in the head of all your pages: 

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title here</title>
...
</head>

Once you do this you'll see more consistent behavior between browsers, and from one page to another.

More about the viewport meta tag

Hope this helps!

Upvotes: 3

Related Questions