Hi guys,
My site is done, and it looks fine in all viewports on the editor, even on safari on my phone. However, when I load it on chrome IOS all the texts are extremely scaled, how can this be and can I fix it? It’s on all pages.
Thanks for taking a look.
Best regards,
Koen
Here is my site Read-Only: LINK
(how to share your site Read-Only link)
Hi Koen,
When dealing with text scaling issues across browsers, particularly in Safari, using root ems (rem) units for text sizing is recommended. Rem units are relative to the root HTML element’s font size, which means they automatically adjust based on browser settings and user preferences. This makes them ideal for maintaining consistent text scaling and improving accessibility across different devices and browsers.
You can use the Text zoom preview tool in Webflow to test how your site responds to different text zoom settings, ensuring your design remains accessible and readable for all users.
Hopefully this helps! If you still need assistance, please reply here so somebody from the community can help.
Chrome iOS applies its own text auto-scaling unless you set a proper viewport meta tag. Try adding meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" in your custom code , had the exact same issue on a client build and that fixed it.
