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?
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" />
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.
