Reload theme on page resize

Question

A website I am working on has two drastically different designs for mobile and desktop. For this reason I chose to make 2 different themes, and have the mobile detect module (https://github.com/EaDesgin/magento2-mobiledetect) detect whether the mobile or desktop version should be loaded.

This fixes the problem for displaying a different theme on mobile devices, but it does not take browser resizing into account.

How can I make my Magento 2 website load the other theme from, lets say, 768 pixels and down?

I plan to use a preloading effect for the transition. (https://tympanus.net/Tutorials/PagePreloadingEffect/index.html)

Answer 1

As themes contain dynamic files such as PHP and PHTML templates you will need to refresh the page, it isn't as simple as just changing a theme at a certain breakpoint.

Because of this my understanding is you'll need to refresh the page, also I'm not sure why you need that plugin when Magento 2 comes with the functionality to load different themes based on user agent.

Match media solution

The closest thing to this I can see without making huge customisations is to use match media to reload the page at certain breakpoints. For example if the user resizes their window to 767px you can refresh the page. I wouldn't recommend this as it's poor UX, imagine if you was the user and you only wanted to resize the browser to compare two products in two windows and the page refreshed, you'd be like "WTF?!". IMO the negatives outweigh the positives for the few users who will actually resize the window.

Rather than changing themes I would recommend creating a responsive theme that will look correct on any device.

A brief example on how I would attempt to refresh the page for different breakpoints:

mediaCheck({
    media: '(min-width: 768px)',
    // Switch to Desktop Version
    entry: function () {
        window.location.reload(true);
    },
    // Switch to Mobile Version
    exit: function () {
        window.location.reload(true);
    }
});

The boolean in reload(); is to bypass the cache as we're loading dynamic files.

Again, I advise building a responsive theme rather than doing this.