Checking if extension editor is in mobile or desktop view

ajaysinghrokt
Shopify Partner
2 0 0

Hi there,

 

I have an extension that renders different layouts based on whether user is on mobile or desktop. This is done by checking the user's browser and not by media queries or the StyleHelper component. I am trying to replicate this behavior in the checkout editor but currently have no way of knowing if the user is displaying the mobile or desktop view.


Is there an API I can call to check this or, alternatively, is there a way for me to change layout based on screen width?

 

Thanks

Replies 2 (2)

Liam
Shopify Staff
2731 294 746

Hi Ajaysinghrokt,

 

It's possible you could use the Layout utility, which is part of the admin-ui-extensions API and returns 'compact' on mobile devices and at narrow screen widths, and 'regular' otherwise. Would this work for you?

Liam | Developer Advocate @ Shopify 
 - Was my reply helpful? Click Like to let me know! 
 - Was your question answered? Mark it as an Accepted Solution
 - To learn more visit Shopify.dev or the Shopify Web Design and Development Blog

ndt_ts
Shopify Partner
24 2 4

Hi Liam,

But this library seems to be outdated and has got no releases since an year.

When i try to install this lib in my checkout extension, it gives me the error.

npm ERR! Could not resolve dependency:
npm ERR! peer react@">=17.0.0 <18.0.0" from @Shopify/admin-ui-extensions-react@1.1.0

Is there any other way latest solution to know if the extension is being shown in a mobile or desktop?