Performance

Mobile Viewport

The mobile viewport is the visible area of a web page on a mobile device. The viewport meta tag (<meta name='viewport' content='width=device-width, initial-scale=1'>) tells browsers how to scale and size content for mobile screens. Incorrect viewport configuration causes mobile layout failures.

Why It Matters for Shopify Stores

Without a correct viewport meta tag, mobile browsers render pages at desktop width and scale them down — making text tiny and requiring users to pinch-zoom. Google's Mobile-Friendly Test flags missing or incorrect viewport tags as critical failures. For Shopify stores, most themes include the correct viewport tag, but theme customizations or conflicting app code can override it.

How to Check Your Store

View page source and search for 'viewport'. Verify the content attribute is 'width=device-width, initial-scale=1'. Avoid 'user-scalable=no', which is an accessibility violation.

Use the free shopify speed test tool

How to Fix It

In your theme's layout/theme.liquid file, verify the viewport meta tag is correctly placed in the <head> section. Never add 'user-scalable=no' or 'maximum-scale=1' — these violate accessibility guidelines.

Related Terms

Check your store's Mobile Viewport with our free tools

Get a full audit across all 6 performance categories — including performance — in under 60 seconds.

Run a Free Store Audit