Kiln for Bricks Buy Kiln

Modules / Visibility & conditions

Condition: device

Condition: device (mobile / tablet / desktop)

Render an element only on phones, tablets or desktops. The server decides, so the hidden markup is never sent to the visitor.

#15 of 39 modules by votes

  • On by default
  • Needs Bricks 2.4 or newer
  • Tested with Bricks 2.4.3
Buy Kiln · all 39 modules, US$79 a yearBrowse the other 38 modules

Tile 15 of 39, ranked by votes · Recording in progress

Where to find it in the builder

Element conditions: Device, in the Kiln group.

How to use it

  1. Select the element and open its Conditions.
  2. Add the condition Device from the Kiln group.
  3. Choose is or is not.
  4. Pick the device: Mobile phone, Tablet, Phone or tablet or Desktop.

Use it to leave heavy or irrelevant markup out of the page, such as a video hero on phones or a desktop mega menu. For layout changes alone, Bricks' breakpoint controls are cheaper.

How it works

Kiln reads the visitor's user agent. If a CDN sends a CF-Device-Type header (Cloudflare's "Cache by device type"), Kiln uses that value instead. It sorts the request into mobile, tablet or desktop:

  • Smart TVs, Android TV, Google TV and Fire TV count as desktop.
  • Tablets are matched before phones, so an Android tablet is a tablet and an Android phone is a phone.
  • Phone or tablet matches anything that is not desktop.

A developer can override the result with the kiln/device filter. It receives mobile, tablet or desktop and must return one of the three.

Compared with the Operating system condition

The Operating system condition in Bricks can only be combined per OS with OR, and it cannot tell an Android phone from an Android tablet. This condition can.

How it works with page caches

The result differs per device, so a page that checks it cannot come from one shared cache. When the page evaluates a Device condition, Kiln tells page-cache plugins not to cache it (the DONOTCACHEPAGE constant, the LiteSpeed Cache no-cache call, and no-cache headers when they have not been sent yet).

A cache at the host or CDN level, such as nginx, Varnish or Cloudflare "cache everything", only sees the response headers. Those are usually sent before Bricks renders the page. Make that cache vary by device, or exclude the page, or one device's version is served to everyone.

Limits

  • iPadOS 13 and newer, and Chrome on large Android tablets, ask websites for the desktop version. Kiln counts them as desktop.
  • Googlebot crawls as a phone. Content you show to desktops only is not indexed.

Settings

None. Turn the module on in Bricks > Kiln (it is on by default).

Requirements

Bricks 2.4 or newer.