Responsive Design - switching breakpoints

Saola Animate
1

I have started using your excellent responsive design feature and it’s working really well. I have a mobile breakpoint up to 1024 wide and a desktop breakpoint for anything above that.

What I was wondering is whether it is possible to manually switch between them?

For example, if a phone or table user has a resolution of 1024x768, then the mobile version is displayed as expected - but is there a way to code a button that would allow the mobile user to show the desktop version if they so wish?

2

Hi Mackavi,

The content is laid out based on the size of the container.
So to show another layout, you must change the container size, then re-layout the content.
You can find the sample code below:

// change container size (width, height or both, depending on your design)
doc.container.style.width = '1280px';
//doc.container.style.height = '930px';

// in mobile device, you may need to change viewport size too
// so that the display will be scaled to that viewport size without showing scrollbar
var viewport = document.querySelector('meta[name=viewport]');
if (viewport) {
  viewport.content = 'width=1280'; // or viewport.content = 'width=1280, height=930';
}

// layout the content
doc.layoutIfNeeded();

Regards

3

Brilliant, exactly what I was trying to achieve. Thank you.

A small request. Would it be possible to add the ability to have the html file when published set to index.html rather than the project name?

4

We’ll take note but I’m not sure if it’s implemented or not.
There’s no output file refers to the HTML file, you can freely change its name in File Explorer.

Regards

5

Thanks.

Yes, I rename it manually at the moment but as my web server’s loads index.html files automatically, it would just make it slightly easily if I could simply sync between my local and live systems without having to rename each time.