How exactly do I create themes / CSS snippets for mobile (iPhone and iPad)? Desktop has dev tools but I'm not sure what to do for mobile

[Oneechan69]

Things I have tried

I looked through help.obsidian.md and did a bunch of searches on r/obsidian, Google, and the forums, and have not figured how to go about writing CSS. On Desktop, I can open Chrome Developer tools and inspect each element to write CSS, but there doesn’t seem to be a way to do this for iOS. I have a desktop CSS snippet but when applying it to iOS, it hides a bunch of elements and looks broken.

I want to change the look of lots of UI sections, including the tab section on iPad and its baffling that I can’t find any resources or answers to this.

[geoffb]

I believe you want to run this.app.emulateMobile(true) (and this.app.emulateMobile(false)) in your Obsidian dev tools console to emulate mobile (and return to desktop mode).

[Oneechan69]

Even in fullscreen on my 13’’ MacBook Air, it only emulates a phone ui. How can I make it emulate the iPad UI with the tabs and sidebar buttons on top?

[geoffb]

Have you toggled the device toolbar in your dev tools, and then set dimensions appropriate for the device you’re emulating? I just tried iPhone SE dimensions vs iPad Air dimensions and I get very different results, so it looks like Obsidian is correctly handling the difference between the two devices via breakpoints.

[Oneechan69]

That worked, thank you!

[Oneechan69]

@geoffb I thought I wouldn’t have anymore questions but I do:

Would you know how to show the bottom bar on iPhone in the mobile emulation?

As well as the this bottom white section on iPad when I edit text using the iPad Magic Keyboard?

[Oneechan69]

@geoffb I looked up this.app.emulateMobile(true) and found this page: Develop for mobile devices | Obsidian Plugin Developer Docs which shows a command for toggling the mobile UI on and off:

this.app.emulateMobile(!this.app.isMobile);