/    Sign up×
Community /Pin to ProfileBookmark

The layout gets broken in mobile Chrome if the font size is increased

Copy linkTweet thisAlerts:
May 19.2018

So, I’ve tried to make my website a little more mobile friendly by making the font size in the “<main>” increase if “navigator.userAgent” contains the string “Mobile”. It appears to work as expected in Firefox on Android and in the Android Stock Browser. However, in Mobile Safari, it appears to work only on some pages on my site, while the same part of the script appears to be ignored on others (despite working in Firefox and in Android Browser). Also, in Chrome, the layout gets completely broken when that part of the script is run. You can see my website here (right now, I’ve added some browser-sniffing not to run that part of the script in mobile Chrome):
http://flatassembler.000webhostapp.com/
Did anyone else here have a similar problem? I suppose it has something to do with the fact that mobile Chrome automatically tries to make non-mobile sites mobile-friendly by increasing the font size of some parts of the web-pages, and possibly also that there is some error in my CSS (which I am not so good at).
Please be polite, I’m 18 and I’ve been trying to learn how to program for only five years now, and this is my first website.

to post a comment
JavaScript

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@FlatAssemblerauthorMay 19.2018 — You can see a template I used here if it helps at all:

http://flatassembler.000webhostapp.com/template.html
Copy linkTweet thisAlerts:
@rootMay 19.2018 — If you are attempting to shoehorn people in to a moblie site, consider this...

Give them a choice.

Why?

Well simply put, new mobile browsers work just fine with normal as you like it HTML,

I know I hate being pushed in to a mobile site, fastest way to make me bounce.

Developers should consider more than one option when deciding on what they want to display, mobile sites are a pain, getting to anything you need on them takes forever, one site I needed to contact and only had mobile, forced me in to a mobile site and took me a good five minutes scrolling, as I had to access this site, I had no option and my sentiments were left with the comments on their site for contact.

Cutesy may look nice but its not everyones cup of juice. Options Options Options, give people a choice on how they want to see the site, older devices are more in need of mobile designs as their browsers are simpler.

×

Success!

Help @FlatAssembler spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.23,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...