Mobile or Desktop state? - determining in your template

Determining your visitor’s device in Responsive Classic

Responsiveness - the ability to display properly on not just a desktop computer, but also mobile devices like phones and tablets - is a critical feature of modern templates.

Determining the kind of device being used can be done in different ways. How you do it will depend on the template you are running, and what tools are available with that template.

The responsive_classic template, as well as many other templates, builds in the Mobile_Detect library.

Use this to query the environment and react accordingly.

if (!class_exists('Mobile_Detect')) {
  include_once(DIR_WS_CLASSES . 'Mobile_Detect.php');
}
  $detect = new Mobile_Detect;
  $isMobile = $detect->isMobile();
  $isTablet = $detect->isTablet();

You likely already have a Mobile_Detect object built, so you can just do

global $detect; // If you're in a function
if ($detect->isMobile() || $detect->isTablet()) { 
  ...

You might also want to check $_SESSION['layoutType'] == 'mobile' in case that variable is set.


Another approach is the one used by Twitter Bootstrap. Bootstrap uses the CSS “media queries” breakpoints feature to determine the appropriate presentation for the device in use. Bootstrap proponents argue that bootstrap is faster to load and more well maintained than Mobile-Detect. You can observe how this is done in the Zen Cart admin, which makes heavy use of Bootstrap.




Still have questions? No problem! Just head over to the Zen Cart support forum and ask there in the appropriate subforum. In your post, please include your Zen Cart and PHP versions, and a link to your site.

Is there an error or omission on this page? Please post to General Questions on the support forum. Or, if you'd like to open a pull request, just review the guidelines and get started. You can even PR right here.
Last modified October 19, 2020 by Chris Brown (7226485).