Configure minimal theme plugin differently for mobile vs desktop

Hello friends,

I am trying to configure the Minimal theme settings differently for mobile vs desktop.

Specifically: the Minimal theme settings pane has a setting “Small font size”, default 13. I’d like to leave it at 13 for the desktop, but on my iOS devices have it set to 20. Is this possible? At present it seems to ping-pong – when I open an iOS device and configure it to 20, everything works for a while, but sometimes (I think when I use the desktop app) it keeps resetting it back.

I am sync’ing my vault between MacOS, an iPhone, and an iPad – via plain files on iCloud Drive.

I found the setting in question. It seems to be under .obsidian/plugins/obsidian-minimal-settings/data.json. I see a key textSmall. But this file appears to be shared btw desktop and mobile.

I do see that I have different root files .obsidian/workspace-mobile.json and .obsidian/workspace.json. So it occurred to me that I might be able to simply move the textSmall key to these root values and specify different values. But not sure (a) if I should add it to both workspace.json files and remove it from the data.json file, or leave it in both places, or what, (b) if it will work, i.e. if there’s one global key space or if Obsidian looks specifically in plugins/obsidian-mobile-settings/data.json, (c) whether this might be risky / prone to randomly changing back again: esp because I have already gotten myself into trouble where the UI becomes unusable if this parameter is too small. I would try it but it seems like a rabbit hole given multiple devices, multiple files, potential for breaking things, etc.

Could someone please advise me here? Is it possible to do what I’m trying to do, and if so, which file should I move the key into?

Many thanks!

Ben.

Read this: Select files and settings to sync - Obsidian Help
In resume, you can use the default configurations in your desktop and create a new folder for configurations (I guess it includes all things, as themes, plugins, etc) in mobile.

hello m. – thank you, but that doesn’t really help.

Unless I am missing something … that article only describes how it works with Obsidian Sync. As noted above, I am not using Sync – I am sync’ing via plain files on iCloud Drive (not using Obsidian sync).

I’m wondering if there’s anything in the workspace-mobile.json and workspace.json files that could help with this. I think there probably is, but not quite sure how to do it.

Thanks!
Ben.

Oops – my mistake, I misread the page you referenced. I see what you mean, the last section describes using an entirely different .obsidian-mobile settings folder. I really don’t want to do that, as I like sharing every other possible setting btw platforms. But it’s a workaround. Thanks!

I have submitted a FR to the plugin. – Different font settings for mobile vs desktop · Issue #505 · kepano/obsidian-minimal · GitHub – Not sure if it’s possible to do what I’m asking, but we’ll see. Thanks for the reply.

This is also something I’m interested on.
I want to have global settings applied everywhere and then some little overrides per device. Did you found a way to do it?

Hi @danielo515 - unfortunately I didn’t. The best way I came up with was to have a totally different workspace settings for mobile vs desktop. I use a lot of plugins and had various other configurations customized, so this was worse than the original problem (font size too big on desktop). So I’ve just been living w/ it.

How about this:

Change the value of --font-ui-small, everywhere it exists, by screen size.

/* mobile */
@media (max-width: 480px) {
    * { --font-ui-small: 20px !important; }
}

/* tablet */
@media (min-width: 480px) and (max-width: 768px) {
    * { --font-ui-small: 20px !important; }
}

/* pc */
@media (min-width: 768px) {
    * { --font-ui-small: 13px !important; }
}

^ just add that to your regular CSS snippet, and use the same vault on pc/ios ( + @danielo515 ) - :sailboat:

**

( To easily view the effect, set the /* pc */ value to something crazy, like 42px; )

Does that accomplish what you want?

what ho, @ZenMoto !! – I think this may be on the right track. Many thanks!

I don’t know a ton about Electron or CSS, but I did the following, and it almost works:

  • added myvault/.obsidian/snippets/change-system-fontsize.css
  • populated that file with the above
  • went to settings/Appearance/CSS snippets and made sure that snippet was active

Sure enough!! My desktop has smaller system fonts, and my iPhone does not. But my iPad is showing the small fonts (/* tablet */ section notwithstanding).

Could you please explain the 480px and 768px limits? Are these the screen size, the window size, the pane itself, something else? What exactly is the min/max of 480/768 doing? And is it in some way dependent on my theme or other settings?

Perhaps if I understood it better I could size them appropriately for my iPad’s config.

Thanks so much, this is very exciting.

Quick addendum, I see from here that logical width of my iPhone XS is 375, so I get why the 480 works … but supposedly my 11" iPad Pro is logical width 834. I tweaked the ‘tablet’ setting above to this:

/* tablet */
@media (min-width: 480px) and (max-width: 900) {
    * { --font-ui-small: 22px !important; }
}

but still seeing the same small font on iPad as desktop. So I’m missing something, perhaps something obvious.

Thanks!

Did you also change the pc setting to match that 900px you changed for the tablet?

Yes, I did make sure to do that as well… first with 850px and then with 900px.

Here’s my entire current snippets file, perhaps I’m missing something:

/* mobile */
@media (max-width: 480px) {
    * { --font-ui-small: 22px !important; }
}

/* tablet */
@media (min-width: 480px) and (max-width: 900) {
    * { --font-ui-small: 22px !important; }
}

/* pc */
@media (min-width: 900px) {
    * { --font-ui-small: 13px !important; }
}

The iPad is definitely picking up the third, /* pc */-flagged section. If I change just the third entry from --font-ui-small: 13px to something crazy (e.g. 42 px as suggested above) the iPad and desktop both show the big font. So for some reason the third entry is affecting the iPad.

Other ideas?

That block is just missing a px in tablet max width. Should be good with this:

/* mobile */
@media (max-width: 480px) {
    * { --font-ui-small: 22px !important; }
}

/* tablet */
@media (min-width: 480px) and (max-width: 900px) {
    * { --font-ui-small: 22px !important; }
}

/* pc */
@media (min-width: 900px) {
    * { --font-ui-small: 13px !important; }
}

And yes, smartphones go by logical width, so it was smart to look that up!

:tropical_fish:

According to this, iOS Resolution // iPad Pro (3rd gen 11"), it says physical width is 1668. So sorry, if this is a goose chase, but do you see a difference in the iPad if you try with 1700? If that is the case, we need something else to separate the iPad from the pc.

See this article on an alternative approach for detecting the iPad pro. Instead of relying on sizes which are comparable to the pc, it checks whether the device has the possibility to hover or not.

Thank you both! You have made my day.

That block is just missing a px in tablet max width. Should be good with this:

Ah, good point, but unfortunately it didn’t work with 900px. However per @holroy 's suggestion …

do you see a difference in the iPad if you try with 1700?
If that is the case, we need something else to separate the iPad from the pc.

… I tried 1700px, i.e. using the cutoff points 480 and 1700 – and this works perfectly on all three devices (iOS, iPad, and Macbook Pro). The hover detection was an interesting idea; but perhaps it won’t be needed.

I don’t totally understand why this works. My system settings says I have a 3072 x 1920 Retina display, and I thought MacOS scaled this 2x, so I would have thought the logical resolution to be 3072/2 = 1536. But I double-checked it and the third setting (>1700px) is definitely kicking in for my Macbook and not on my iPad, and w/ no external monitor too. If either of you understand this I’d be curious what’s going on. But it seems to be working just as I’d like it!

Since we have gone this far … do either of you happen to know what setting determines the command palette font size? (This is the same hover that shows the list of files I see if I press cmd-O, etc.) That seems to be independent of the other settings I’ve tried, and I can’t figure out where to adjust it. It’s the one other font that is different on mobile.

Thanks again, really appreciate it!

Using media queries is a smart hack for UI related things.
But what I want is to be able to specify certain settings per device, while I keep the rest of the settings (including the installed plugins) the same.
To give you an example that works as I expect is the vim mode. I can enable/disable it per device, and that is not affecting other devices.
Ideally I want a base configuration and then have per-device configurations that only override those settings that are specified, inheriting the rest from the base config.

You should post another request with this as a topic. We should aim for one topic for each thread, otherwise it’ll be too confusing keeping track of what we’re responding to.

1 - This is how you target command-palette font size:

/* command prompt font-size */
input.prompt-input, .suggestion-title {
    font-size: 26px; 
}

**

2 - The viewport size is reported differently from iOS vs MacOS.

It is then declared by this line in <head>:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

Device pixel density is a huge topic of its own.

**

3 - Hey I’m glad you got it set up right. Big text feels so much better :flamingo:

TERRIFIC. Thank you again, @ZenMoto – I am now fully tweaked and optimized!

1 - This is how you target command-palette font size:

Perfect, works perfectly and easy to adjust within each device block.

2 - The viewport size is reported differently from iOS vs MacOS.
Device pixel density is a huge topic of its own.

Interesting.

For anyone else who stumbled on this or is curious – I dug a little deeper and found a range of relevant values … JS screen.width (which resizes with window), @media (device-width), etc. You can check your own device’s values here.

Many thanks.

2 Likes

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.