Community forum for knowledge and support

Updated last month

Relume-based site rendering issues on mobile

At a glance

A community member published their first Relume-based website and encountered an issue with the mobile (iOS Safari) rendering. When they pinched to zoom out, the page did not respond as expected - it did not prevent zooming out or properly re-snap to the page edges. Even after refreshing, the page no longer snapped to full width as expected.

Other community members suggested trying a specific meta viewport tag in the site settings, but this did not resolve the issue. The problem appears to be specific to iOS Safari, as it does not occur in iOS Chrome. Some suggestions included trying a different meta viewport tag to prevent zooming, and inspecting the source code of other sites that behave as expected to see what meta tags they are using.

There is no explicitly marked answer, but the community members continue to troubleshoot and explore potential solutions for this iOS Safari-specific issue.

Useful resources

Hey all, I just published my first Relume-based site. When I opened it on mobile (iOS > Safari), it rendered correctly at first. However, I pinched to zoom out, and the zoom out was not responsive, nor did it prevent zooming out, nor did it properly re-snap to the page edges. Basically it didn’t respond in any of the ways I would expect. Now even when I refresh the page, the page will no longer snap to full width as expected.

Is this a known issue with Relume-based sites or an error in my implementation?

M
D
10 comments

would you mind sharing a read-only link?

thanks for taking a look!


You'll likely want this piece of code and put it in the <head> custom field in site settings.<br /><pre><meta name="viewport" content="width=device-width, initial-scale=1.0" /></pre>

Sadly this did not work.

However, I tested again and found that the issue only happens in iOS Safari and not in iOS Chrome.

This is true with and without the code you provided.

Any further ideas?

nope, after a quick search its looking like its an iOS Safari issue, not much we can do on the web side.

If you wanted to try to prevent the zoom, you could try this code but I am not 100% sure it will prevent it 100% of the time.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

it looks like the issue has persisted since 2021

another option would be to browse other sites in safari, trying to pinch/zoom and if one behaves like you'd expect, I would view the source code of that site and see what meta tags they are using. It'll likely be a meta tag like I've pasted above, or a media query - both of which should be visible within the top <head> section of the source code.

Thanks for letting me know. It works on my old template-based website so let me inspect that and see if I can copy something over from there.

Add a reply
Sign up and join the conversation on Slack