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 is a video showing the font-size changing: video of problem
Here are two pictures side-by-side that illustrate the problem. Font in left picture is bigger than font in right picture:
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!
android html css 
google-chrome responsive-design edited Oct 17 '17 at 20:24
EgMusic
6314
asked Oct 1 '17 at 2:29
Joel Hoelting
435318
|
show 4 more comments
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 is a video showing the font-size changing: video of problem
Here are two pictures side-by-side that illustrate the problem. Font in left picture is bigger than font in right picture:
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!
android html css google-chrome responsive-design edited Oct 17 '17 at 20:24
EgMusic
6314
asked Oct 1 '17 at 2:29
Joel Hoelting
435318
1
Interesting one. Have you tried using other units for font size?pxfor example?
– Morpheus
Oct 6 '17 at 10:51
I looked your website, I am not able to point out the problem. Can you please clear it in the better way?
– Chirag Jain
Oct 6 '17 at 12:28
@Morpheus: px still doing the same thing, there must be some other css thats causing this but why only on chrome mobile?
– Joel Hoelting
Oct 6 '17 at 17:43
maybe it's the fractional font size being computed differently at different times? the font-size is always reporting as computed at 16.8px for me in the dev tools. and in your screen shots, the lowercase n is 8px tall in one and 9px tall in the other, including the aliasing. off-by-one feels a lot like a rounding error/decision at render time to me.
– worc
Oct 6 '17 at 21:48
2
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.
– Cheesy
Oct 10 '17 at 21:18
|
show 4 more comments
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 is a video showing the font-size changing: video of problem
Here are two pictures side-by-side that illustrate the problem. Font in left picture is bigger than font in right picture:
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!
android html css google-chrome responsive-design edited Oct 17 '17 at 20:24
EgMusic
6314
asked Oct 1 '17 at 2:29
Joel Hoelting
435318
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 is a video showing the font-size changing: video of problem
Here are two pictures side-by-side that illustrate the problem. Font in left picture is bigger than font in right picture:
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!
#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>#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>edited Oct 17 '17 at 20:24
EgMusic
6314
asked Oct 1 '17 at 2:29
Joel Hoelting
435318
edited Oct 17 '17 at 20:24
EgMusic
6314
asked Oct 1 '17 at 2:29
Joel Hoelting
435318
edited Oct 17 '17 at 20:24
EgMusic
6314
edited Oct 17 '17 at 20:24
EgMusic
6314
edited Oct 17 '17 at 20:24
EgMusic
6314
6314
asked Oct 1 '17 at 2:29
Joel Hoelting
435318
asked Oct 1 '17 at 2:29
Joel Hoelting
435318
asked Oct 1 '17 at 2:29
Joel Hoelting
435318
435318
1
Interesting one. Have you tried using other units for font size?pxfor example?
– Morpheus
Oct 6 '17 at 10:51
I looked your website, I am not able to point out the problem. Can you please clear it in the better way?
– Chirag Jain
Oct 6 '17 at 12:28
@Morpheus: px still doing the same thing, there must be some other css thats causing this but why only on chrome mobile?
– Joel Hoelting
Oct 6 '17 at 17:43
maybe it's the fractional font size being computed differently at different times? the font-size is always reporting as computed at 16.8px for me in the dev tools. and in your screen shots, the lowercase n is 8px tall in one and 9px tall in the other, including the aliasing. off-by-one feels a lot like a rounding error/decision at render time to me.
– worc
Oct 6 '17 at 21:48
2
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.
– Cheesy
Oct 10 '17 at 21:18
|
show 4 more comments
1
Interesting one. Have you tried using other units for font size?pxfor example?
– Morpheus
Oct 6 '17 at 10:51
I looked your website, I am not able to point out the problem. Can you please clear it in the better way?
– Chirag Jain
Oct 6 '17 at 12:28
@Morpheus: px still doing the same thing, there must be some other css thats causing this but why only on chrome mobile?
– Joel Hoelting
Oct 6 '17 at 17:43
maybe it's the fractional font size being computed differently at different times? the font-size is always reporting as computed at 16.8px for me in the dev tools. and in your screen shots, the lowercase n is 8px tall in one and 9px tall in the other, including the aliasing. off-by-one feels a lot like a rounding error/decision at render time to me.
– worc
Oct 6 '17 at 21:48
2
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.
– Cheesy
Oct 10 '17 at 21:18
1
1
Interesting one. Have you tried using other units for font size?
px for example?– Morpheus
Oct 6 '17 at 10:51
Interesting one. Have you tried using other units for font size?
px for example?– Morpheus
Oct 6 '17 at 10:51
I looked your website, I am not able to point out the problem. Can you please clear it in the better way?
– Chirag Jain
Oct 6 '17 at 12:28
I looked your website, I am not able to point out the problem. Can you please clear it in the better way?
– Chirag Jain
Oct 6 '17 at 12:28
@Morpheus: px still doing the same thing, there must be some other css thats causing this but why only on chrome mobile?
– Joel Hoelting
Oct 6 '17 at 17:43
@Morpheus: px still doing the same thing, there must be some other css thats causing this but why only on chrome mobile?
– Joel Hoelting
Oct 6 '17 at 17:43
maybe it's the fractional font size being computed differently at different times? the font-size is always reporting as computed at 16.8px for me in the dev tools. and in your screen shots, the lowercase n is 8px tall in one and 9px tall in the other, including the aliasing. off-by-one feels a lot like a rounding error/decision at render time to me.
– worc
Oct 6 '17 at 21:48
maybe it's the fractional font size being computed differently at different times? the font-size is always reporting as computed at 16.8px for me in the dev tools. and in your screen shots, the lowercase n is 8px tall in one and 9px tall in the other, including the aliasing. off-by-one feels a lot like a rounding error/decision at render time to me.
– worc
Oct 6 '17 at 21:48
2
2
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.
– Cheesy
Oct 10 '17 at 21:18
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.
– Cheesy
Oct 10 '17 at 21:18
|
show 4 more comments
7 Answers
7
active
oldest
votes
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%.
answered Oct 12 '17 at 7:54
Cheesy
18915
add a comment |
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;
answered Oct 6 '17 at 13:58
MultiDutch
288
This didn't have any effect. Were you able to replicate the problem on mobile Chrome?
– Joel Hoelting
Oct 6 '17 at 17:39
i added a * after your paragraph selector to selects all the paragraph's.... That's not what * does. css-tricks.com/almanac/selectors/u/universal
– Raphael Rafatpanah
Oct 11 '17 at 12:36
add a comment |
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.
answered Oct 7 '17 at 15:22
Lapys
3911313
add a comment |
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 :)
answered Oct 8 '17 at 4:29
Josh Corbett
94
But the window isn't getting resized so the font-size shouldn't change either. I tried with px and em, doesn't fix the issue. It's frustrating because the resizing doesn't occur in dev tools, so i can't get to the root of it.
– Joel Hoelting
Oct 8 '17 at 18:02
add a comment |
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.
answered Oct 11 '17 at 14:37
EgMusic
6314
MDN is far superior to w3schools.
– meagar♦
Oct 17 '17 at 17:08
@meagar I have edited my post to include this website
– EgMusic
Oct 17 '17 at 17:26
add a comment |
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.
answered Oct 12 '17 at 16:55
owen sziber
398
add a comment |
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.
answered Nov 12 at 4:09
jshockwave
196211
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46508686%2fwhy-is-paragraph-text-shrinking-in-chrome-for-mobile%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
7 Answers
7
active
oldest
votes
7 Answers
7
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%.
answered Oct 12 '17 at 7:54
Cheesy
18915
add a comment |
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%.
answered Oct 12 '17 at 7:54
Cheesy
18915
add a comment |
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%.
answered Oct 12 '17 at 7:54
Cheesy
18915
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%.
answered Oct 12 '17 at 7:54
Cheesy
18915
edited Oct 12 '17 at 7:59
answered Oct 12 '17 at 7:54
Cheesy
18915
answered Oct 12 '17 at 7:54
Cheesy
18915
answered Oct 12 '17 at 7:54
Cheesy
18915
18915
add a comment |
add a comment |
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;
answered Oct 6 '17 at 13:58
MultiDutch
288
This didn't have any effect. Were you able to replicate the problem on mobile Chrome?
– Joel Hoelting
Oct 6 '17 at 17:39
i added a * after your paragraph selector to selects all the paragraph's.... That's not what * does. css-tricks.com/almanac/selectors/u/universal
– Raphael Rafatpanah
Oct 11 '17 at 12:36
add a comment |
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;
answered Oct 6 '17 at 13:58
MultiDutch
288
This didn't have any effect. Were you able to replicate the problem on mobile Chrome?
– Joel Hoelting
Oct 6 '17 at 17:39
i added a * after your paragraph selector to selects all the paragraph's.... That's not what * does. css-tricks.com/almanac/selectors/u/universal
– Raphael Rafatpanah
Oct 11 '17 at 12:36
add a comment |
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;
answered Oct 6 '17 at 13:58
MultiDutch
288
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;
#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;
#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;
answered Oct 6 '17 at 13:58
MultiDutch
288
answered Oct 6 '17 at 13:58
MultiDutch
288
answered Oct 6 '17 at 13:58
MultiDutch
288
answered Oct 6 '17 at 13:58
MultiDutch
288
288
This didn't have any effect. Were you able to replicate the problem on mobile Chrome?
– Joel Hoelting
Oct 6 '17 at 17:39
i added a * after your paragraph selector to selects all the paragraph's.... That's not what * does. css-tricks.com/almanac/selectors/u/universal
– Raphael Rafatpanah
Oct 11 '17 at 12:36
add a comment |
This didn't have any effect. Were you able to replicate the problem on mobile Chrome?
– Joel Hoelting
Oct 6 '17 at 17:39
i added a * after your paragraph selector to selects all the paragraph's.... That's not what * does. css-tricks.com/almanac/selectors/u/universal
– Raphael Rafatpanah
Oct 11 '17 at 12:36
This didn't have any effect. Were you able to replicate the problem on mobile Chrome?
– Joel Hoelting
Oct 6 '17 at 17:39
This didn't have any effect. Were you able to replicate the problem on mobile Chrome?
– Joel Hoelting
Oct 6 '17 at 17:39
i added a * after your paragraph selector to selects all the paragraph's.... That's not what * does. css-tricks.com/almanac/selectors/u/universal– Raphael Rafatpanah
Oct 11 '17 at 12:36
i added a * after your paragraph selector to selects all the paragraph's.... That's not what * does. css-tricks.com/almanac/selectors/u/universal– Raphael Rafatpanah
Oct 11 '17 at 12:36
add a comment |
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.
answered Oct 7 '17 at 15:22
Lapys
3911313
add a comment |
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.
answered Oct 7 '17 at 15:22
Lapys
3911313
add a comment |
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.
answered Oct 7 '17 at 15:22
Lapys
3911313
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.
answered Oct 7 '17 at 15:22
Lapys
3911313
answered Oct 7 '17 at 15:22
Lapys
3911313
answered Oct 7 '17 at 15:22
Lapys
3911313
answered Oct 7 '17 at 15:22
Lapys
3911313
3911313
add a comment |
add a comment |
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 :)
answered Oct 8 '17 at 4:29
Josh Corbett
94
But the window isn't getting resized so the font-size shouldn't change either. I tried with px and em, doesn't fix the issue. It's frustrating because the resizing doesn't occur in dev tools, so i can't get to the root of it.
– Joel Hoelting
Oct 8 '17 at 18:02
add a comment |
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 :)
answered Oct 8 '17 at 4:29
Josh Corbett
94
But the window isn't getting resized so the font-size shouldn't change either. I tried with px and em, doesn't fix the issue. It's frustrating because the resizing doesn't occur in dev tools, so i can't get to the root of it.
– Joel Hoelting
Oct 8 '17 at 18:02
add a comment |
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 :)
answered Oct 8 '17 at 4:29
Josh Corbett
94
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 :)
answered Oct 8 '17 at 4:29
Josh Corbett
94
answered Oct 8 '17 at 4:29
Josh Corbett
94
answered Oct 8 '17 at 4:29
Josh Corbett
94
answered Oct 8 '17 at 4:29
Josh Corbett
94
94
But the window isn't getting resized so the font-size shouldn't change either. I tried with px and em, doesn't fix the issue. It's frustrating because the resizing doesn't occur in dev tools, so i can't get to the root of it.
– Joel Hoelting
Oct 8 '17 at 18:02
add a comment |
But the window isn't getting resized so the font-size shouldn't change either. I tried with px and em, doesn't fix the issue. It's frustrating because the resizing doesn't occur in dev tools, so i can't get to the root of it.
– Joel Hoelting
Oct 8 '17 at 18:02
But the window isn't getting resized so the font-size shouldn't change either. I tried with px and em, doesn't fix the issue. It's frustrating because the resizing doesn't occur in dev tools, so i can't get to the root of it.
– Joel Hoelting
Oct 8 '17 at 18:02
But the window isn't getting resized so the font-size shouldn't change either. I tried with px and em, doesn't fix the issue. It's frustrating because the resizing doesn't occur in dev tools, so i can't get to the root of it.
– Joel Hoelting
Oct 8 '17 at 18:02
add a comment |
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.
answered Oct 11 '17 at 14:37
EgMusic
6314
MDN is far superior to w3schools.
– meagar♦
Oct 17 '17 at 17:08
@meagar I have edited my post to include this website
– EgMusic
Oct 17 '17 at 17:26
add a comment |
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.
answered Oct 11 '17 at 14:37
EgMusic
6314
MDN is far superior to w3schools.
– meagar♦
Oct 17 '17 at 17:08
@meagar I have edited my post to include this website
– EgMusic
Oct 17 '17 at 17:26
add a comment |
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.
answered Oct 11 '17 at 14:37
EgMusic
6314
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.
answered Oct 11 '17 at 14:37
EgMusic
6314
edited Oct 17 '17 at 17:26
answered Oct 11 '17 at 14:37
EgMusic
6314
answered Oct 11 '17 at 14:37
EgMusic
6314
answered Oct 11 '17 at 14:37
EgMusic
6314
6314
MDN is far superior to w3schools.
– meagar♦
Oct 17 '17 at 17:08
@meagar I have edited my post to include this website
– EgMusic
Oct 17 '17 at 17:26
add a comment |
MDN is far superior to w3schools.
– meagar♦
Oct 17 '17 at 17:08
@meagar I have edited my post to include this website
– EgMusic
Oct 17 '17 at 17:26
MDN is far superior to w3schools.
– meagar♦
Oct 17 '17 at 17:08
MDN is far superior to w3schools.
– meagar♦
Oct 17 '17 at 17:08
@meagar I have edited my post to include this website
– EgMusic
Oct 17 '17 at 17:26
@meagar I have edited my post to include this website
– EgMusic
Oct 17 '17 at 17:26
add a comment |
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.
answered Oct 12 '17 at 16:55
owen sziber
398
add a comment |
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.
answered Oct 12 '17 at 16:55
owen sziber
398
add a comment |
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.
answered Oct 12 '17 at 16:55
owen sziber
398
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.
answered Oct 12 '17 at 16:55
owen sziber
398
answered Oct 12 '17 at 16:55
owen sziber
398
answered Oct 12 '17 at 16:55
owen sziber
398
answered Oct 12 '17 at 16:55
owen sziber
398
398
add a comment |
add a comment |
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.
answered Nov 12 at 4:09
jshockwave
196211
add a comment |
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.
answered Nov 12 at 4:09
jshockwave
196211
add a comment |
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.
answered Nov 12 at 4:09
jshockwave
196211
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.
answered Nov 12 at 4:09
jshockwave
196211
answered Nov 12 at 4:09
jshockwave
196211
answered Nov 12 at 4:09
jshockwave
196211
answered Nov 12 at 4:09
jshockwave
196211
196211
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f46508686%2fwhy-is-paragraph-text-shrinking-in-chrome-for-mobile%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
Interesting one. Have you tried using other units for font size?
pxfor example?– Morpheus
Oct 6 '17 at 10:51
I looked your website, I am not able to point out the problem. Can you please clear it in the better way?
– Chirag Jain
Oct 6 '17 at 12:28
@Morpheus: px still doing the same thing, there must be some other css thats causing this but why only on chrome mobile?
– Joel Hoelting
Oct 6 '17 at 17:43
maybe it's the fractional font size being computed differently at different times? the font-size is always reporting as computed at 16.8px for me in the dev tools. and in your screen shots, the lowercase n is 8px tall in one and 9px tall in the other, including the aliasing. off-by-one feels a lot like a rounding error/decision at render time to me.
– worc
Oct 6 '17 at 21:48
2
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.
– Cheesy
Oct 10 '17 at 21:18