Page MenuHomePhabricator

Document the right way to detect that we are in mobile mode (MobileFrontend) from JavaScript
Closed, ResolvedPublic

Description

When a user script, gadget, or any other piece of JS is running, it's useful to know whether we are in mobile or desktop mode. I couldn't find a way to do it anywhere in the documentation on mediawiki.org. One thing with which I could come up is if ( mw.config.get( 'skin' ) === 'minerva' ), but I'd expect there to be something more robust.

Event Timeline

@Amire80 where do you want me to document this?
Really the answer is simple - you shouldn't be thinking like this :)

Ideally, any scripts that you need to run on Minerva only should be in User:Amire80/minerva.js
You should then be thinking about specific features of the skin e.g. is $( '#element') available on this skin and when thinking with regards to am I on mobile or desktop think about what the value of $( window ).width() is instead.
It's not robust as writing code that should work on all skins is probably not the best idea :)

If you simply have a common gadget that just wants to throw an error when loaded out of context that is known to be incompatible with Minerva your snippet should be fine:

if ( mw.config.get( 'skin' ) === 'minerva' )

@Amire80 where do you want me to document this?

Somewhere findable on mediawiki.org, like https://www.mediawiki.org/wiki/Extension:MobileFrontend or https://www.mediawiki.org/wiki/ResourceLoader/Writing_a_MobileFrontend_friendly_ResourceLoader_module .

Ideally, any scripts that you need to run on Minerva only should be in User:Amire80/minerva.js

Heh, didn't think about this. Now that you write it, it makes a lot of sense, but it doesn't seem to be documented or used much, if at all, at Wikimedia sites. E.g., the Google search "minerva.js" site:wikipedia.org yields almost nothing, unlike "monobook.js" site:wikipedia.org. FWIW, we now have another bug report thanks to this discussion: T158033 :)

But another issue is that at least now, the user's common.js runs, too (T157938), so some way to know that we're not on desktop is needed. But judging by what you write here, checking for the skin name is the most sensible thing at the moment.

Even though it might be implicitly obvious, I'd still mention it explicitly somewhere on mediawiki.org.

Also, now that we're talking about "minerva.js", what is "mobile.js" then? I can't find clear documentation of that either.

Also, now that we're talking about "minerva.js", what is "mobile.js" then? I can't find clear documentation of that either.

It's called minerva.js in the User namespace and Mobile.js in the MediaWiki namespace.

Jdlrobson claimed this task.

User:<username>/mobile.js will run on all mobile skins including Vector. I've written this up here:
https://www.mediawiki.org/wiki/ResourceLoader/Writing_a_MobileFrontend_friendly_ResourceLoader_module#Targeting_mobile_devices

Let's take this to the talk page if we need any more clarifications :)