0

I'm not a web developer. I'm budding games developer. I'm making this website to show off my portfolio.

I think its looking good in all the pc browsers I tried. It should look like thiswhat it should look like

But in chrome and firefox on android, the block of text in the top right is rendered in a massive size font which makes that div huge and pushes everything down.

how it looks on android

Now, Originally there was the mainpage html file with the sitemap + that paragraph, and the individual bits about my projects, for instance 'artefact', were seperate pages loaded into an iframe.

I noticed that, the lower paragraph in the iframe was fine even though the div is the same class as the problematic one above.

Heres what Ive tried so far..

I made that p a new class and defined its text size explicitly
I put the entire website in another iframe. strangely didnt make any difference
I put that pargraph in a li in a ul
I put all the text in that paragraph in a span
I changed the text from a p to a h7

The android browser is still picking up on it and making the text huge, and not the one below..
In firefox it seems this is being caused by 'font inflation' and I can get around it by changing firefoxes settings. But why is it only inflating one paragraph and ignoring the other?

Please note. I have done everything in this site in pixels and not % or em. If I can just get android to not blow up that one paragraph it'll be fine.

Guye Incognito
  • 2,726
  • 6
  • 38
  • 72

2 Answers2

3

I have actually discovered a good solution to this.. Add this line to your css..

html * {max-height:1000000px;}

Fixes it on chrome and firefox on android anyway.

You can read more about it here. Discovered it on this stackoverflow question

Community
  • 1
  • 1
Guye Incognito
  • 2,726
  • 6
  • 38
  • 72
2

We have a think called Font Boosting, it is designed to make text that is hard to read on a mobile device more readable. You can't really get around it other than to create a mobile optimised site by including the mobile viewport meta tag <meta name="viewport" content="width=device-width"> this will turn off the font-boosting, but it will mean the width of the screen is measured in CSS pixels at about 480px on a Nexus4.

Kinlan
  • 16,315
  • 5
  • 56
  • 88
  • In my case at least, the presence of `` makes absolutely no difference, and Chrome mobile (v88) still applies font boosting to some elements. – Arad Alvand Feb 07 '21 at 20:20