Adjusting the font size using viewport units for mobile Chrome browser

In the process of building a website, I decided to implement varying CSS styles for desktop and mobile versions. For responsive font sizes on mobile, I opted for vw units instead of media queries due to the constant changes in mobile screen sizes. However, it appears that Chrome mobile may be exhibiting some buggy behavior specifically with vw font sizes.

I would appreciate it if you could take a look at these two mobile pages on both Firefox and Chrome:

While Firefox displays the font sizes correctly as expected, Chrome seems to be having issues:

  • The font sizes appear incorrect throughout the page

  • The footer font size differs between the two pages (in Firefox, both footers display the same font size)

Could it be possible that Chrome does not handle vw well?

If this is not simply a coding mistake on my part, I may consider reporting a bug. But before I do so, I would like to get confirmation from others.

For instance, consider the following vw declaration for the footer:

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

This declaration is visible in both browsers' developer tools, suggesting that it is being rendered on both Firefox and Chrome. However, it seems they interpret it differently.

Since the CSS for mobile is unique compared to desktop, please use the mobile device emulation feature in your browser's developer tools when inspecting (for Chrome, refer to https://developers.google.com/web/tools/chrome-devtools/device-mode/)

cssresponsive-designfont-sizemobile-websiteviewport-units

Answer №1

It appears that the core issue you are facing is the absence of a viewport meta tag in the head section of your pages. Without it, browsers will default to scaling the page to fit the screen.

To address this problem, make sure to include the viewport tag in the head of all your pages like so: 

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

By implementing this change, you can expect more consistent behavior across different browsers and from one page to another.

For further details on the viewport meta tag, click here

I trust this information proves helpful!

Answer №2

The discrepancy in font size is most likely due to Mobile Chrome's font-boosting feature. Elements with varying heights are automatically boosted for better visibility. One workaround is to set a max-height on the element or its parent:

.parent {
    max-height: 999999px;
}

However, it's advisable to apply the max-height directly to the text-containing element to avoid affecting other layout elements. To verify the changes, test them on an actual device since Chrome's Dev Tools won't display the font boosting.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

There seems to be a problem with displaying two div elements side by side using Html/CSS

Recently, I've delved into the world of html/css/javascript just for fun. I've encountered a little roadblock and I could use some help. In my html code, I'm trying to display two div elements on the same line but for some reason, it's ...

htmlcss

Creating a responsive design using Bootstrap4

Today, I made the switch to bootstrap4 and enabled flexbox in _variables.scss. However, I'm still confused about the flexbox capabilities of bootstrap4. Some questions I have include: How can I utilize flex-direction:column? Is it possible to creat ...

csstwitter-bootstrapflexboxtwitter-bootstrap-4bootstrap-4

Leveraging $last in Angular for obtaining the final visible element with ng-show

My ng-repeat container div contains multiple images, each with a corresponding div next to it. Using $last, I can make sure only the div of the final image is visible after all images. However, I also have a filter button on the page that hides certain im ...

javascriptjqueryhtmlcssangularjs

Having trouble placing the flash element above the HTML?

Despite my efforts to use SWFObject to embed a swf file on my webpage, it seems that the flash movie is covering some of the HTML components. Strangely enough, the HTML elements are bleeding through and appearing on top of the flash content. I've tri ...

htmlcssflashz-indexwmode

Showcase text in a straight row by utilizing ng-repeat and bootstrap

My goal is to show each word on a new line, similar to how words are displayed in a hangman game. The words should be displayed as blanks. <body ng-init="models = [['H','a','p','p','y'],['X',& ...

cssangularjstwitter-bootstrap-3

Struggling to align menu items horizontally with CSS? Using the inline property just isn't cutting it

I'm struggling to get my menu to display horizontally, no matter what I try. What am I doing wrong? I think the issue might be with the inline option, but I'm not certain. If someone could help correct my code, I would be very grateful. Thank you ...

htmlcss

The issue of webkit animation rotation malfunctioning on Nexus Mobile devices

I'm currently working on developing a double ring radar animation within an Ionic hybrid application. The animation functions perfectly when viewed in a web browser, however, I've encountered issues when attempting to run it on the Nexus mobile ...

cssionic-frameworkcore-animationcss-transitionscss-animations

When using the :hover pseudo class, Chrome disregards the overflow hidden style change

In my design, there is a circular div (border-radius: 50%) that includes two smaller divs transformed to look like segments of a circle. To achieve this effect, I have set overflow: hidden on the parent container (the outer circle): I am trying to change ...

cssgoogle-chromehtmlcss-transforms

Guide: Extracting text content from HTML using Selenium WebDriver in Python utilizing CSS selectors

Seeking assistance in extracting text from the following HTML code. Specifically looking to retrieve '383' as a text using a CSS selector within this HTML snippet. <td align="right" style="background-color: rgb(147, 191, 179); c ...

pythonhtmlcssseleniumselenium-webdriver

"Customizing the color of the arrow in Bootstrap tooltips

Trying to customize tooltips in twitter-bootstrap, I set the template option of the tooltip with inline styles to achieve red tooltips instead of the default black color: $(document).ready(function(){ options = { container: 'body&ap ...

csstwitter-bootstrap

Having issues with dynamic components in Nuxt using Bootstrap 5

I've been working on integrating Bootstrap 5 into my Nuxt project. While the styles are coming through perfectly, anything that previously relied on jQuery is not functioning as expected. The steps I followed for installation: Downloaded files fr ...

javascriptcssnuxt.jsbootstrap-5

Create a custom HTML webpage with unique CSS, avoiding the use of generic application styles

The majority of the HTML pages are designed with a basic layout, however, there is one page that requires a timeline layout. Unfortunately, this conflicts with the existing universal app CSS, causing the timeline to appear scattered across the screen. Is ...

csshtmlfrontend

Error with Display of ASCII Character 62 in Superfish Menu

Currently, I have implemented the Superfish menu on my website. In order to indicate sub-menus within my menus, I have opted to utilize the character entity code &#62;, which historically has represented ">". Oddly enough, while viewing my website ...

htmlcssinternet-explorer-8superfish

The div element makes a comeback following its disappearance using the .hide() method in jQuery

I've tried various solutions and checked similar questions, but I have had no luck so far. I have a simple div where users can enter their name and surname. My goal is to post the input to another page using jQuery, hide the first div (div1), and sho ...

javascriptjqueryhtmlmysqlcss

Unable to fix gap at the base of the jumbotron

Utilizing the jumbo tron to display a hero image of psd, there seems to be a gap at the bottom that I have tried to adjust with margin-bottom: 0px without success. .jumbotron { background-image: url(image/background.png); background-repeat: no- ...

htmlcsstwitter-bootstrap

Inquiring about creating a responsive website using Bootstrap's grid system and CSS media queries

My website was created using Bootstrap's grid system and CSS media queries based on col-xs, col-md. While it is responsive, I encountered an issue with font size adjustments within media queries - the font appears smaller when reaching the max-width o ...

htmlcssbootstrap-4bootstrap-carousel

Hide the off-canvas menu when clicking outside

I recently created a unique "slide-out" menu which you can check out here: SASS Slide-out Menu. While it is functional, I am looking to add a feature where clicking outside of the menu will automatically close it by removing the "nav-open" class. I a ...

javascriptjquerycssmenu

Setting the margins incorrectly can result in an improper horizontal alignment of the link element

Currently working on a website design, I'm trying to horizontally center align the link that contains an image. In my .css file, I specified a margin of 40 auto 50 auto within the .ad class, but the element remains aligned to the left. What could be c ...

htmlcss

The variable that was posted in the JavaScript 'if' statement seemed to vanish in an instant

My website has forms that send data to a PHP file, triggering the appearance of items in a cart: <form method="post"><fieldset> <input type="hidden" name="jcartToken" value="<?php echo $_SESSION['jcartToken'];?>" /> <i ...

javascriptphpcssforms

Style the labels on the axis of Frappe Charts with colors (potentially utilizing the appropriate CSS selector)

Is it possible to style the x and y axis labels in a Frappe chart with different colors? https://i.stack.imgur.com/A3vUq.png While trying to identify the CSS selectors using Chrome DevTools, I found that a single text element (representing an x axis labe ...

javascripthtmlcss