Are flexible custom font settings possible?

#1

I have a single file wiki that travels very often between smartphone (where it gets edited with Tiddloid) and desktop (where it gets edited with TiddlyDesktop).

On desktop, the default font size is too small for me. I can change font family and size from Control Panel -> Appearance -> Theme Tweaks, then everything looks good. But when I sync the wiki back to phone and open it in Tiddloid, the modified font size is too big for the tiny screen.

So the status quo with default settings is that the font is too small on desktop, while with modified settings, the font is too big on smartphone.

Is it possible to have “flexible” font settings, as in use the default ones in Tiddloid and custom ones in TiddlyDesktop, when working with the same wiki file?

#2

You could certainly do it using CSS media queries by overriding the values you care about in a custom stylesheet that has different settings for different window widths, with something like:

body.tc-body {font-size: 20px;}
@media only screen and (max-width: 499px) { body.tc-body {font-size: 12px; }}

You could also use a dynamic value inside those theme tweaks, based on the device screen size, not the window size:

title: $:/themes/tiddlywiki/vanilla/metrics/fontsize

<% if [{$:/info/browser/screen/width}compare:number:gt[1000]] %>20px<% else %>12px<% endif %>