Prestashop: detect mobile devices

In addition to using a responsive theme, which adapts depending on the size of the device used by the user, it can be useful to detect if the device is a smartphone, a tablet or a computer.

In a responsive theme, generally, we use the technique of not displaying certain portions of the page on some devices simply hiding them through some rules of stylesheets (css): this solution does not lighten the weight of the pages because the hidden code will be anyway present on the page and so loaded by the browser.

Instead, by detecting the device used, it may be possible to display or not texts, images, additional functions, etc. correctly and effectively.

Prestashop 1.7.x and Prestashop 1.6.1.x

These versions of Prestashop use already a class to detect the device used (/classes/Context.php), thanks to which, we can check directly in the .tpl files of our theme.

Detect a smartphone

{if Context::getContext()->isMobile() && !Context::getContext()->isTablet()}
  your content
{/if}

or

{if Context::getContext()->getDevice() == 4}
  il contenuto da far visualizzare
{/if}

Detect a tablet

{if Context::getContext()->isTablet()}
  your content
{/if}

or

{if Context::getContext()->getDevice() == 2}
  il contenuto da far visualizzare
{/if}

Detect a computer

{if !Context::getContext()->isMobile() && !Context::getContext()->isTablet()}
  your content
{/if}

or

{if Context::getContext()->getDevice() == 1}
  il contenuto da far visualizzare
{/if}

Prestashop 1.6

Detect a mobile devices

{if isset($mobile_device) && $mobile_device}
  your content
{/if}

Pros and cons

• It is more effective than the solution of not displaying certain portions of the page on some devices simply by hiding them with some style sheet rules (css).
• Some devices may not be detected correctly, so we suggest to make the largest possible number of checks.