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?
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.
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!
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.
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.
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:
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.
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.
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.
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.
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.
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.