Well, I don't think forcing the use of blur effect on mobile would be possible, as all solutions I can think of require the use of Mobile CSS or JS pages, which are inaccessible to wiki admins, at least for now.
However, as an alternative, you can try using collapsible to hide the spoiler content, as it seems to work on both desktop and mobile skins.
First, create a template, say Template:SpoilerText, with the content being as follows:
<span class="mw-collapsible mw-collapsed" data-expandtext="Show Spoiler" data-collapsetext="Hide Spoiler" style="display:inline-flex;">{{{1|}}}</span>
Then, use it on the spoiler-containing texts you want to hide. Let's say, I use it on the following text:
Cascading Style Sheets{{SpoilerText| (CSS)}} is a style sheet language used for describing the presentation of a document written in a markup language such as HTML. CSS is a cornerstone technology of the World Wide Web{{SpoilerText|, alongside HTML and JavaScript}}.
CSS is designed to enable the separation of presentation and content{{SpoilerText| including layout, colors, and fonts}}. This separation can improve content accessibility, provide more flexibility and control in the specification of presentation characteristics, enable multiple web pages to share formatting by specifying the relevant CSS in a separate .css file which reduces complexity and repetition in the structural content as well as enabling the .css file to be cached to improve the page load speed between the pages that share the file and its formatting.
Source: Copied from Wikipedia
The result should look like this on desktop:
And looks like this on mobile: