How to idetify mobile or desktop device.

Peter_Jaroch
New Member
1 0 0

I've build responsive theme and I'm preaty happy on what I can do with @media queries and device detection in js. The only think I can't figuere out how I can detect mobile in liquid. For example I want use two diffrent jquery plugins to handle a product gallery on mobile and desktop.

To do that I i will need to load some diffrent css and js files one mobile and desktop. Also HTML markup of images on product page need to be sligty diffrent. Is there are any variable available that I can use in if statnemt, to identify mobile device?

Thanks for any help.

0 Likes
Alex135
Astronaut
1889 2 470

No.  Liquid will not be able to detect the type of device or browser or really any information about the viewer's setup.  You'll have to rely on Javascript and CSS.

0 Likes
johanepic
New Member
1 0 0

You can use JavaScript window.matchMedia() method to detect a mobile device based on the CSS media query.

if (window.matchMedia("(max-width: 767px)").matches)
{
// The viewport is less than 768 pixels wide
document.write("This is a mobile device.");
}

You may also use navigator.userAgentData.mobile .

const isMobile = navigator.userAgentData.mobile;

Another approach would be a responsive media query. You could presume that a mobile phone has a screen size greater than x and less than y. For example:

@media only screen and (min-width: 320px) and (max-width: 600px) {}

0 Likes