How to implement transition of widget to the mobile layout

When initializing the widget, you can specify whether to use the mobile version by default. To do this, use the isMobile parameter of the window.metaframe.create method.

To switch between the mobile and desktop layouts of Metaframe depending on the device screen resolution, use the window.metaframe.setIsMobile method.

Example code for switching to mobile layout of Metaframe at a screen resolution of 1000 px and less:

const mediaQuery = window.matchMedia("(max-width: 1000px)");

function handleMetaframeLayoutChange(e) {
 window.metaframe.setIsMobile(e.matches);
}

handleMetaframeLayoutChange(mediaQuery);
mediaQuery.addEventListener('change', handleMetaframeLayoutChange)