3 replies [Last post]
intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 4 years 51 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

Hi there! Smile

I've got some paragraphs and an unordered list inside a green div that looks fine on desktop but the font is oddly sized on mobile. Here are comparison screenshots:

Desktop screenshot - looks the way I want it
Mobile screenshot - screwy font size

The page in question is here. To reach the part with the green div, unfortunately you have to click "Continue" 36 times to get your result. Sexy (If I do say so myself, it's a fun test though! Party )

If you just want to look at the source code, the green div with content is in lines 378-383. The content references some stuff in a JS file; I have put what I believe to be all the relevant part in Pastebin here.

Any help figuring out why the text in the green div looks right on desktop but wrong on mobile and fixing it on mobile would be hugely appreciated!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 5 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

I'm no help, but

Using web fonts may be the culprit. Are web fonts fairly universally supported in mobile devices?

Using javascript to sniff browser types/sizes is a poor practice. It was barely OK in 1997, but not since. If the page doesn't work without javascript, you have problems. Scripting sucks the life out of batteries; a lot of people disable javascript to improve battery life. Almost 2 megaBytes in 16 scripts is an opportunity for error due to unintentional conflicts.

Using bootstrap, though they say otherwise, is an impediment to good responsiveness.

Some mobiles, I'm looking at you Apple, lie about how they handle resolutions. Add this to the head of your pages:

    <meta name="viewport"
            content="width=device-width; 
		     height=device-height; 
		     initial-scale=1">

Does the javascript implement your responses? I saw no @media queries. Maybe I just missed them. Ten style sheets, totaling 337kBytes is another possible source of conflicts. Three or four style sheets, totaling less than 50kBytes is more than enough for even large sites.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

intjadmin
intjadmin's picture
Offline
Enthusiast
Europe
Last seen: 4 years 51 weeks ago
Europe
Timezone: GMT+1
Joined: 2011-05-15
Posts: 52
Points: 73

Hi Gary, thank you so much

Hi Gary, thank you so much for engaging with my issue! Smile

Web fonts: Other text on the same page uses the same web font and renders just fine on mobile, so I don't think this is the cause of the problem.

Bootstrap / 10 css files: The page is a nightmare, I know. It's the result of several different freelancers building on each other's code and not having much of an incentive to do things properly. However, this is the first issue I'm aware of where the page isn't rendering acceptably (with the caveat that my bar for "acceptable" is quite low - but this issue is bugging me).

Adding a meta viewport tag actually solves the issue so don't think you're not of any help! Smile I'm still conflicted about whether I can live with the initial-scale value of 1 (which is necessary) since it means only a small corner of the page loads at first, but I'll probably end up accepting it because this font issue bugs me so much.

Hopefully one day I'll be able to have the site recoded to be responsive, but that's a big job outside my own competency and will have to wait until I find someone I both trust to be able to do it well and can afford. (Let me know if you're a freelancer! Smile )

Thanks again!

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 20 hours 5 min ago
Dallas
Timezone: GMT-5
Joined: 2004-06-25
Posts: 9772
Points: 3854

...

  1. Web fonts increase bandwidth requirements and network latency for little, if any benefit to your visitor. Graphic browsers provide enough font faces to make web fonts redundant except for rare edge cases. I saw nothing on your pages that require an artsy-fartsy glyph set.
  2. Bootstrap and other preprocessors of that ilk push the idea that they make responsive web sites and styling in general easier. I have no idea how learning a new user interface and writing more code on top of the basic stuff is either easier or faster than simply using proper html and css.
  3. I suspect the rendering delay on small screen devices is due to the delay caused by rendering the javascript. Responsive design requires no javascript, only that you know how to use css media queries.
  4. jQuery and angular are comprehensive libraries of javascript functions and methods. The problem lies with the humongous size and the need to be broadly generic. To truly use it properly, you must know enough to be able to pare them down to only those functions you need. You're loading ~1.5mBytes in three scripts, for what? I have no doubt that 90% of that does nothing in your pages.
  5. I am retired and am too lazy to take on a rewrite contract. I would be happy to assist you in that undertaking here on the forum so that others may benefit from the endeavor. (Back-end stuff, php and data-base, etc. can be handled privately.)

I had an interesting test result,
Nurture 63.9%
Tradition 22.2%
Liberty 97.2%.

There were several questions that didn't have enough information to support a considered opinion.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.