Creating custom mobile emulators for layout

jwepurchase

27-02-2020

My client's media queries are based on the standard bootstrap media query sizes (576, 768, 992, 1200) and none of the existing emulators hit these marks exactly. So I created new ones based on /libs/wcm/mobile/components/emulators/ios/iphonex. I copied it and modified its cq:emulatorConfig properties, setting the device-pixel-ratio to 1 and the width and height to the approprtiate values.

After this I updated the emulator list in /etc/mobile/groups/responsive/jcr:content and it works.

The problem is that I've modified things under libs to get this to work. I've tried moving my custom emulators under a /conf directory, and pointing /etc/mobile/groups/responsive/jcr:content at this. This breaks the layout editor - the page refuses to load until I remove the custom emulators from the list.

Has anyone successfully done this without modifying /libs?

Accepted Solutions (1)

Accepted Solutions (1)

jwepurchase

03-03-2020

I got a clue from Arun's post. (Thanks Arun.) I assumed that my emulators should be under the /conf directory because it felt like a configuration to me. But the emulators are components, so I placed them under /apps/<my-project>/components/emulators and that worked.

Now I can configure the "emulators" property of /etc/mobile/groups/responsive/jcr:content adding a name like "<my-project>/components/emulators/<my-emulator>" (no need to specify either the /libs or /apps nodes) and it shows up in the list of available emulators. I had to use crx/de to do this - for some reason the miscadmin tool that Arun referenced in his post didn't work for me. This wan't really a barrier for me so that's OK.

So now I have a custom emulator and I didn't have to modify /libs to do it.

Answers (3)

Answers (3)

BrianKasingli

MVP

28-02-2020

@jwepurchase,

Setting up custom emulators and breakpoints require additional CSS and JCR node setup. This good article will provide you with ways to set up this customization:https://medium.com/adobetech/customizing-the-aem-grid-3ff9c2121a36

Hope it helps!

chau_khap329255

27-04-2020

hi,

I got an issue after creating custom devices. It shows the custom break point there but when I modify one layout, it affects other layouts as well. 

Do you get the same issue? Can you please give me advice for that?