Update Shopify Mobile Viewport Meta Code for a Smoother Running Website
In today's Seventeen Second Spark we're talking about updating some of the outdated Shopify theme liquid code, more specifically, the Viewport meta Content code. Without a viewport meta tag, mobile devices render pages at typical desktop screen widths and then scale the pages down, making them difficult to read. Setting the viewport meta tag, with updated code, lets you control the width and scaling of the viewport so that it's sized correctly on all devices.
Typically, in older websites and theme, the viewport meta code (found in your Theme.Liquid page) looks like this:
meta name="viewport" content="width=device-width,initial-scale=1"
The content above is a little outdated (based on Google's newest protocols), so we suggest you swap out that code with this code:
meta name="viewport" content="initial-scale=1, maximum-scale=1"
Updating this code will keep your website mobile experience running smoothly for your valued visitors. Don't give your potential customers a reason to leave. Not having a seamless mobile experience is detrimental to your conversions.
Keep your site code fresh, have fun, and if you need help, don't hesitate to reach out to us for help.