Topic on Extension talk:MobileFrontend

Optimised for mobile, but not on desktops

4
Iantresman (talkcontribs)

How do I hide elements on my desktop Vector-skinned home page display, that are meant for display on mobiles only? eg.:

<div id="mf-homemobile">[[file:homepagemobileimage.jpg]]</div>

Per Configuring the main page, the "mf-" class/id prefix adds the element to the mobile display. But it also displays on my desktop display.

  • Is there a corresponding "nomobile" class (ie. "nodesktop") class?
  • Is there a CSS snippet that can be added to MediaWiki:Common.css
  • Is there another extension I need?

I am using MW 1.23.5.

Iantresman (talkcontribs)

This seems to work:

  • Add class="mf-homepage" to elements you want to display on mobile displays.
  • In MediaWiki:Common.css, add: .mf-homepage {display:none}, ie:
<div class="mf-homemobile">[[file:homepagemobileimage.jpg]]</div>

I had tried to use id="mf-homemobile" with the corresponding #mf-homepage {display:none}, and while the element displayed as expected, the rest of the homepage on my mobile did not display, even though I had not used the "nomobile" class.

Jdlrobson (talkcontribs)

Yeh this is essentially what .nomobile does it just hides stuff in css. This is not ideal as any images inside that element and all its content will still get loaded on mobile. It's a tricky problem they we still haven't worked out how best to solve. You may be interested in Requests_for_comment/Allow_styling_in_templatesJdlrobson (talk) 01:24, 14 November 2014 (UTC)

Iantresman (talkcontribs)

Can't you use something like the Lazy Load jQuery plugin, which "delays loading of images in long web pages". It can also be set to ignore images that are not ":visible", hence they will never load. Perfect!

Reply to "Optimised for mobile, but not on desktops"