CODEWITHSUNDEEP
androidhtmlcssgoogle-chromeresponsive-design
Joel Hoelting
Joel Hoelting

Reputation: 1992

Why is paragraph text shrinking in Chrome for Mobile?

The problem is happening on Chrome/Android and possibly Chrome on other mobile devices. I have only been able to test it on a Nexus 5x so far. I am using Handlebars.js to dynamically display quotes inside paragraph tags. Whenever the displayed quote is less than three lines, the font-size shrinks. I am having a difficult time debugging this font sizing issue because it only seems to be happening on Chrome for Mobile. The issue does not replicate in Chrome dev tools responsive mode. The font resizing does not happen in IOS Safari or Firefox Mobile.

If you have Chrome on a mobile device would you please have a run through of the game and see if you notice the issue? LINK HERE

Here are two pictures side-by-side that illustrate the problem. Font in left picture is bigger than font in right picture:

enter image description here enter image description here

Here is the code for that section of the site (link to repository):

#game-screen {
  margin-top: 2%;
  @media (max-width: 550px) {
    margin-top: 4%;
  }
  #game-quotes {
    width: 90%;
    margin: 0 auto;
    @media (max-width: 550px) {
      width: 95%;
    }
    p {
      font-size: 3.6rem;
      @media (max-width: 750px) {
        font-size: 2.4rem;
      }
      @media (max-width: 550px) {
        font-size: 1.4rem;
      }
    }
  }
}
<div id="game-screen">
  <div id="game-pictures">
  </div>
  <div id="game-quotes">
    <h6 class="center">Quote {{counter}}/10</h6>
    <p>"{{content}}"</p>
  </div>
</div>

Does anyone have an idea of what might be causing this font-resizing?

Thanks in advance if you can offer any help.

Link to Repository

Edit: Thanks to all of you who helped me!

Upvotes: 19

Views: 3825

Answers (9)

David Callanan
David Callanan

Reputation: 5958

For me, I had to include minimum-scale in the meta tag:

<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1"/>

Upvotes: 0

GMaiolo
GMaiolo

Reputation: 4628

The only way to fix this for my React application was using this CSS rule:

* {
  max-height: 999999px;
}

I have no idea why this works.

It was an extremely specific issue that I had with my Samsung Note 8 and nothing else worked. I also tried different meta tags combinations and all possible text-size-adjust values, nothing worked but this.

Hopes this helps someone from diving into this rabbit hole that I just came out of.

Upvotes: 1

jay-danger
jay-danger

Reputation: 663

I have experienced this same issue and it's very annoying. I filed a bug for Chrome (see details here: https://bugs.chromium.org/p/chromium/issues/detail?id=877833#c9) and they basically said it wasn't worth it to them to fix it. In my case, as suggested by @Cheesy, my android's accessiblity was set to larger than standard font size. That does not invalidate the issue, IMO. If large font size makes ALL font larger great. But it should not inconsistently be resizing font in some places on the page while ignoring others.

Upvotes: 1

EgMusic
EgMusic

Reputation: 134

This may be because of the resolution of the phone or tablet. It may be best to customize your webpage to stay the same size, no matter the device.

try using max-width:Resolution;

You will have to apply this to the body class for this to apply to everything.

I.E.

`.body {`<br>
`    max-width: 3840px;` /*4K resolution, for 4K displays*/

This SHOULD fix the text issue. If not, please refer to https://www.w3schools.com or https://developer.mozilla.org/en-US/. it may be able to help you.

Upvotes: 1

owen sziber
owen sziber

Reputation: 144

For cross compatibility for my web pages I tend to use the following:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This seems to work with no additional styling with CSS needed for the mobile platforms. Not sure if it what you want though.

Upvotes: 10

Cheesy
Cheesy

Reputation: 339

Can you check if your Chrome font size is at 100% in settings on your phone? Chrome for Android has an option to render font at a different value. You can find this option in: Menu -> Settings -> Accessibility. I did a mistake like this some weeks ago and I want to be sure that is not the case here. Sorry if I'm out of the line here.

I also found that for some unknown reason sometimes Chrome for Android set this font setting wrong at installation time. I could not replicate this behavior but I got one phone, of a relative, with this so it might be possible that you are not aware of the fact that this setting is not set at 100%.

Upvotes: 3

Josh Corbett
Josh Corbett

Reputation: 31

The rem unit is unlike px or em. When you resize the window, using rem will keep the ratio of the text and the window size the same. Try using em or px to resolve the issue :)

Upvotes: 1

Lapys
Lapys

Reputation: 946

I'm not sure if this is the answer to your question but I find this consistent for CSS:

body {
    /** Setting the 'font-size' property of the <body> to 62.5%
     *   allows you to use the 'em' measurement as you would in 'px' form.
     *   ...hope that's clear.
    */
    font-size: 62.5%;
}

#someDivInBody {
    font-size: 1.65em; /* or '16.5px' by CSS */
}

This method has allows me to use the em measurement as I would in px but with more consistency and control.

Upvotes: 1

MultiDutch
MultiDutch

Reputation: 34

i added a * after your paragraph selector to selects all the paragraph's. maybe this will solve your problem. please tell me if it worked, i wanna know the outcome :)

#game-screen {
  margin-top: 2%;
  @media (max-width: 550px) {
    margin-top: 4%;
  }
  #game-quotes {
    width: 90%;
    margin: 0 auto;
    @media (max-width: 550px) {
      width: 95%;
    }
    p *{
      font-size: 3.6rem;
      @media (max-width: 750px) {
        font-size: 2.4rem;
      }
      @media (max-width: 550px) {
        font-size: 1.4rem;
      }
    }
  }
}

Upvotes: 1

Related Questions