androidcssgoogle-chromemobiletext-size

text-size-adjust in my css used to work on Chrome on my phone, stopped working, still works on my wife's phone

I'm updating an old website of mine to work on mobile. I've been using text-size-adjust to get the text more or less the size I want it on mobile, and it was working fine on Chrome on my Android phone for a few days. Today it just... stopped working. As far as I can tell it just reverted back to however my Android phone changes website text sizes (making them way too small), but I THOUGHT text-size-adjust overwrites this?

Any other changes to my css work fine, but my phone's Chrome browser is just straight up ignoring text-size-adjust now.

Yet it all still works correctly on Chrome on my wife's Android phone? I imagine this has to do with some phone setting or something but why would it work one way for a few days and then just switch on me? I haven't changed the code or any settings on my browser or phone.

Here is an example of my css.

.text_main { /*used for poll / comic / etc. create / display, etc. really a TON of the non main post / reply stuff */
    font-family: Arial, Helvetica, sans-serif;
    font-size: 20px;
    line-height: 24pt;
    color: #000000;
    text-size-adjust: 200%;
    -webkit-text-size-adjust: 200%;
    -ms-text-size-adjust: 200%;
    -moz-text-size-adjust: 200%;
}

Here is a screenshot of my phone on the top and my wife's below it. It USED to look more like her's on mine, but no longer.

My phone Wife's phone

Anyone who can tell me what is going on here?

PS. I know the site looks messy, it's an olddddddd site that I'm just trying to get functional for the few users still hanging around.

Solution

  • From what I can see it looks like your wife's phone has opened the site on the gmail in-app browser so it's slightly different from you using Chrome on Android.

    My advice would be to delete all your text-size-adjust styling as it's an experimental feature which comes with the downside of inconsistent results and instead implement these changes:

    1. Use the Viewport meta tag:
    <head>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

    In short, the viewport meta tag will control how your site is displayed on mobile. Without it, mobile devices will render each page as if it were being rendered on a desktop screen width, then scaled to fit the users screen.

    1. Use media queries to set breakpoints:
    /*
  Only do these setting when screen is 639px maximum based on root font-size 16px
*/
@media screen and (max-width: 39.9375em) {

    /* ... */

}

    Media queries are only applied when the screen in this case has been detected as matching the criteria within the parenthesis (max-width: 39.9375em).

    1. Delete the hardcoded px sizes for the font-size and replace with rem. Each browser has a base size of font (typically 16px) but can be set smaller or bigger by the user depending on their needs (vision impairment etc). By setting all of your fonts to work from the browser base you get uniform scaling without impacting the users settings. For example changing from 18px to 1.125rem in Chrome will look identical like this:
    .list_message_title_old {
    font-family: Arial, Helvetica, sans-serif;
    /* font-size: 18px; < delete */
    color: #000000;
    /* line-height: 20pt; < delete */
    /* text-size-adjust: 250%; < delete */
    /* -webkit-text-size-adjust: 250%; < delete */
    /* -ms-text-size-adjust: 250%; < delete */
    /* -moz-text-size-adjust: 250%; < delete */
    min-height: 1px;
    font-size: 1.125rem; /* < add this [16px x 1.125 = 18px] */
}

.white_text_L {
    font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
    /* font-size: 18px; < delete */
    /* line-height: 24pt; < delete */
    font-weight: bold;
    color: #ffffff;
    /* text-size-adjust: 200%; < delete */
    /* -webkit-text-size-adjust: 200%; < delete*/
    /* -ms-text-size-adjust: 200%; < delete */
    /* -moz-text-size-adjust: 200%; < delete */
    font-size: 1.125rem; /* < add this [16px x 1.125 = 18px] */
}
    1. Now you have the font-size set-up to use rem, inside the @media query just overwirte it and the bigger fonts will be applied on smaller screens like so:
    @media screen and (max-width: 39.9375em) {

   .list_message_title_old {
      font-size: 2.5rem; /* < add this [16px x 2.5 = 40px] */
   }
   
   .white_text_L {
      font-size: 2rem; /* < add this [16px x 2 = 32px] */
   }
}

    Note: you can add many different style properties within the @media queries and they will also be applied, it's not limited to just font-size. You can also have multiple @media to restrict the styles to above/below or between specific screen sizes.