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:
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!
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.
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%.
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;
}
}
}
}
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.
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 :)
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.
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.
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.
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"/>
Related
As you can see, the site is shrinked to the side in some mobile devices:
I'm not sure why. There's not width set in the body or the html tag:
body {
color: #444;
font-family: 'Helvetica Neue LT Std', sans-serif;
font-size: 16px;
}
html {
margin-top: 32px !important;
}
This is the viewport tag:
<meta name="viewport" content="width=device-width">
I don't see any thing strange there either. What could be the problem?
Live site: http://www.m2comm-semi.com/electronic-shelf-labels/
It could be a problem with your initial level of zoom. I recommend changing your meta line to -
<meta name = "viewport"
content = "width = device-width, initial-scale = 1.0"
>
This will force the browser to set your initial level of zoom to normal, i.e. 1x.
Please see What is initial scale, user-scalable, minimum-scale, maximum-scale attribute in meta tag? for more information.
Unfortunately, depending on how else you have coded your file, this may not be much help. Alot of people have difficulty getting their page to display properly on an actual mobile device (as opposed to an emulated one). I am one of them. If I ever figure out a way around this problem, then I will post here accordingly (if no one else has already done so).
Basically, on a Nexus 7 when the font-size changes on the HTML element it's ignored. If I remove the smaller font size everything works as intended, but this adds it's own issues for phones.
CSS:
html { font-size: 10px; }
#media (min-width: 600px) and (max-aspect-ratio: 21/15), (min-width: 768px) {
html { font-size: 16px; }
}
It works if I remove the first line so the media query isn't the issue. Anyone have any ideas or come across this?
My only theory so far is it might be a bug with WebViews (this is currently in a web view).
I was able to work around this by adding an additional catch-all #media query and not specifying font-size outside of the #media queries.
i have problem with different appearance between android and desktop.
not about responsive, but a simple css appearance
i have this
<div class="related">
<h3>Related Posts</h3>
</div>
with css:
.related {
height: 30px;
}
.related h3 {
font-size: 18px;
line-height: 30px;
}
on desktop, h3 lined perfectly in the middle of .related bar, while on android (galaxy grand prime) h3 lined a little bit above, closer to top, around 40% closer to top than 60% to bottom. so 20% difference, which is very visible.
am i missing something? is this Android bug? thanks
The #media rule is used to define different style rules for different media types/devices. Media types look at the capability of the device, and can be used to check many things, such as: width and apply different css to that device.
Example : #media screen and (max-width: 300px) {}
Different devices often behave totally differently and different browsers differently again.
I am using a default custom skin 'GHD' folder (which is not responsive) have downloaded the blanco theme, which is under 'GHDNew' folder, This is where the style.css is based and the responsive media queries.
I am using trying to style the Iphone but cannot get the portrait to work to fit the width of the device. The width is long, I can't explain it but have a look here ghd.ecommerceit.co.uk. The Landscape is working fine.
none of the page is actually fitting, and I'm having to use margins to bring everything in but struggling. Also it's my first time trying to make it responsive. Can anyone advice what I can use to bring different elements in and make them fit according to device width? i.e. Search, Navigation, Logo, Header Links, Body etc...
I don't want to use Margins but in the interim, it's working.
Mayur
The (or at least one) reason this does not fit is
.page {
position: relative;
width: 100%;
min-width: 750px;
min-height: 100%;
}
in your style.css
Check out a css framework for responsive design, like bootstrap or pure css.
You do not have a viewport meta tag in your header, try adding
<meta name="viewport" content="width=device-width, initial-scale=1">
In case your example page is ghd.ecommerceit.co.uk (without www), the (or at least one) problem is
#wrapper {
width: 1004px;
margin: 0px auto;
overflow: hidden;
text-align: left;
}
in your all.css
I have some CSS and HTML where the font-size is explicitly styled to be 13px, and for the most part it stays that way, but occasionally Chrome on the Nexus 7 sometimes displays a part of the same page as 14px;
Unfortunately, I have been unable to recreate the issue in jsfiddle, so I'm not sure what is going on.
Some if the styles I use to influence the font-family and font-size can been seen at my attempt to recreate the issue at http://jsfiddle.net/K9hyG/2/.
When using the Chrome debugger, I can see the following in the Computed Style for one of the offending paragraphs:
border-collapse: separate;
color: rgb(51,51,51);
display: block;
font-family: Optima, Lucia, 'MgOpen Cosmetica', 'Lucida Sans Unicode', sans-serif;
font-size: 14px;
font[size="2"] - 13px default.aspx:427
body - 13px default.aspx:2
height: 36px;
text-align: left;
text-shadow: rgb(255,255,255) 0px 1px 0px;
width: 877px;
The text-shadow is generated by my usage of jQuery Mobile. In the Chrome debugger, two instances of the text-shadow directive appear. One inherited from div.ui-page.ui-body-c.ui-page-active (ui-body-c is the activating component) and the other from body.ui-mobile-viewport.ui-overlay-c, (ui-overlay-c is the activating component), but both definitions from the same section of CSS in the theme file.
If I deactivate one of them, the offending paragraph actually changes to 13px in Chrome Debugger, but still looks the same on the device. If they are both deactivated in Chrome Debugger, then it goes back to 14px. This still happens, even if the text-shadow set to rgb(255,255,255) 0px 0px 0px.
I've seen this post, but that issue is largely unresolved as well.
A colleague of mine has discovered the answer. It looks like I am the unwitting victim of Font Boosting
As per the link, Font Boosting can be disabled by providing max-height: 1000000px on the element in question or on body, body * for all elements.
Your problem is likely due to Chrome's text scaling setting, which sets text at a particular scale for accessibility reasons. A lot of users use this who struggle to read small text on their mobile. You cannot fix this and shouldn't try to resolve it, especially with sites that support mobile devices.
I recommend you either ignore it or modify your CSS so that it supports slightly differing text sizes.
After some tests this rule helped me out. Must be added either to the element containing boosted text or it's parent depending on the div/table structure.
element or parent element {
/* prevent font boosting on mobile devices */
width: 100%;
height: auto;
min-height: 1px;
max-height: 999999px;
}
Maybe the width and heigth values must be corrected according your needs.