Bad mobile experience

[jakobkogler]

Since things get more serious (#256).

The experience of the site is pretty bad right now at the mobile version of Chrome. The formulas are somewhat small compared with the text, and they even are overlayed at some places.

Tested under Android 8.1.0, Chrome Version 66.0.3359.158

Firefox does better.
But I'm also not really happy, since the text is very small and it is hard to read.

[RodionGork]

Thanks for bringing attention to it! Really, these small letters look awful!

I'll try to see whether there is a simple way to improve relative sizes of math-jax rendered formulas. However probably this is one of the hints to minimize using latex for single-letter inlines :)

However, it is worth considering that:

• currently there are 82% users coming from desktop, rather than mobile / tablet
• we never thought before about adapting the site to mobile screens - besides formulas there are code fragments for example, which probably simply don't fit the screen. Moreover most of articles are significant in size and of hard material - not something people would like to read for recreation from mobile screen while laying on a beech :)

My general idea is that we can try to fix what we can, but no immense efforts should be taken to support small screens for now. Meanwhile it may be worth to come up with some recommendation of "dos and donts" for creating "mobile-friendly" articles... One of them probably should be making articles either shorter and simpler - or providing short and simple "preface" to each of them, explaining general idea and what follows below (I think most of them have something of this kind).

[RodionGork]

Seems to be discussion on the same issue, about small formulas rendering:
https://groups.google.com/forum/#!topic/mathjax-users/v0hYt3pvf_8
Need to check all this about metas in the header...

[RodionGork]

Setting "meta viewport ... scale=1" as suggested in the material above seems to fix the problem, but make fonts proportionally small (as reported in FF)... To amend this I've tried to add dedicated css entries for larger font-size on small screens.

Currently the whole is added to main template for testing. If it works, css stuff can be moved to css file bit later (however I still have a hope to move css and js out of e-maxx-eng-auto somehow). It may take some time for some pages to update their template... and browser cache also needs to be cleared, of course...

Feel free to tune font-sizes in these snippets by the way... I'm not sure if they retained original look-and-feel... But can't say...

2e28a52

[jakobkogler]

Looks pretty good right now.

The font size of the code snippets could be a tiny bit smaller.

The only other annoying thing is, that you manually have to resize the page each time you load an article. It always load in a highly zoomed view.

[jakobkogler]

Will try to change the code size in the evening.

[RodionGork]

The only other annoying thing is, that you manually have to resize the page each time you load an article. It always load in a highly zoomed view.

Could you explain this? For me pages open without any manual actions? Are they overflowing the screen? Surely it is not how it should work... I'll try to fix if I understand what it is about...

UPD funny. code font is set to 125%... not sure why, I reduced it:

8121782

Again changes may be hidden by cache for some time... Ctrl-R on the css file itself may help...

[jakobkogler]

The sites load like this.
Both in Chrome and in Firefox.
Resizeing the screen (with two fingers) is necessary.

[RodionGork]

Thanks! I've found a way to reproduce it. Definitely need some more research.

[RodionGork]

Now should be better, please check! If this third attempt will work, I'll transfer code snippets from template to CSS/JS files and then the issue is resolved...

Details: I've found MathJax is auto-resizing its fonts depending on various factors. Among them the "scale" of "viewport". Our design is not really intended for fixed scale=1.0, but I failed to explain this to MathJax config. There are tons of options and hints on the web (as the problem seems to be well-known) - but none worked for me. At last I left it with "scale=1.0" but applying zoom after load. It could be seen that page is resized on mobile approximately 0.3 seconds after loading... Not ideal, but... Hope it will do...

[jakobkogler]

Looks fine to me.
Both in Chrome and Firefox.
You can finalize the changes close the issue.

[RodionGork]

Done. As usual, there may be a bit bewilderment while site and browser cached resources are updated.