Adding iOS and iPadOS compatibility to plugin

Developers: Plugin & API
1

Does anyone have advice on how to extend their plugin’s ability for iOS and iPadOS?

I’m unsure how to go about developing for the mobile apps. It seems the DOM selectors are different from the desktop versions.

My plugin, Stille relies on adding some CSS to the DOM and using class selectors. Just not sure what’s available for me on mobile.

Any help would be great!

1 Like
2

You can emulate the mobile UI by running app.emulateMobile(true) in the console. There should also be a .is-mobile selector (maybe it’s called a bit differently).

3

Thanks so much for this tip @koala!

I gave it a shot and tried to make some adjustments to Stille. Unfortunately, it didn’t yield in adding support for iOS.

I thought this would work:

body.StilleStyle.is-mobile .cm-editor .cm-active {
	opacity: 1.0;
}

But I’m guessing there must be a selector I’m missing…

4

Not sure about the order, but does either of these work?

.is-mobile body.StilleStyle .cm-editor .cm-active {
	opacity: 1.0;
}

body.StilleStyle .is-mobile .cm-editor .cm-active {
	opacity: 1.0;
}
1 Like
5

The DOM should be pretty much the same, but make sure that safari supports the CSS you’re using for iOS and iPadOS.

1 Like
6

@koala Oh! Not sure what happened, but once I updated to version 1.1.0 for iOS, it started working!

Thank you so much for all your help!

1 Like