Issue
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.
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:
- 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.
- 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)
.
- Delete the hardcoded
px
sizes for thefont-size
and replace withrem
. Each browser has a base size of font (typically16px
) 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 from18px
to1.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] */
}
- Now you have the
font-size
set-up to userem
, 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.
Answered By - jQueeny
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.