docs.modx.pro
  1. Extras
  2. MobileDetect
  3. Quick start

Quick start ​

Different content for desktop and mobile on one page in about 5 minutes.

Step 1. Install ​

  1. Install MobileDetect via Extras → Installer (see overview)
  2. Ensure plugin MobileDetect is active and md_disable_plugin = No
  3. Clear the MODX cache

Step 2. Choose an output method ​

You have pdoTools + FenomHTML template without Fenom
Fenom blocks (step 3a)HTML tags (step 3b)

In a template or chunk parsed by pdoTools via Fenom:

fenom
{mobile}
  <p>Content for phone and tablet</p>
{/mobile}

{desktop}
  <p>Desktop content</p>
{/desktop}
modx
[[!pdoPage?
  &element=`tplContent`
]]

The {mobile} block shows for mobile or tablet. For phone without tablet use {phone} (Integration).

Step 3b. HTML tags ​

In the resource body or template:

html
<standard>
  <p>Desktop content</p>
</standard>
<mobile>
  <p>Phone content</p>
</mobile>

The plugin on OnWebPagePrerender removes extra blocks before sending the page. Tag names are configured via md_standard_node, md_mobile_node, md_tablet_node.

Внимание

MODX tags and snippets inside HTML blocks parse before filtering. For conditional heavy snippets prefer Fenom — see Integration.

Step 4. Verify ​

  1. Open the page with markup
  2. On desktop you see the standard / {desktop} block
  3. In mobile emulation or on a phone — the mobile / {mobile} block
  4. Forced mode: add ?browser=mobile to the URL (parameter name is md_force_browser_variable, default browser)

Step 5. Version switcher (optional) ​

The package includes chunk tplMobileDetectSwitch — Desktop / Tablet / Mobile / Auto links:

fenom
{$modx->getChunk('tplMobileDetectSwitch')}
modx
[[$tplMobileDetectSwitch]]

Checklist ​

Next steps ​