The analyzed web page lacks a <meta> tag that specifies an initial-scale attribute within its viewport settings.
Why is this important?
A page's viewing area, or viewport, changes depending on the user's device. A viewport <meta> tag gives instructions on how to scale and dimension the page correctly.
Including 'initial-scale=1' ensures that the page uses the device's width appropriately, maintaining a 1:1 ratio between CSS pixels and device-independent pixels.
Without this, mobile browsers default to a wider desktop viewport and scale content to fit, causing inconsistent font sizes and possibly requiring users to zoom to interact properly with the content.
What does the Optimization check?
Loud Interactive's Optimization will flag any URL that features a viewport <meta> tag missing the initial-scale attribute.
Examples that trigger this Optimization:
Below is a sample snippet that would cause the Optimization to activate due to the absence of an initial-scale attribute in the viewport <meta> tag:
<!doctype html><html lang="en"><head> <meta name="viewport" content="width=device-width"> ...</head><body>...</body></html>
How do you resolve this issue?
The initial scale parameter is crucial for controlling the zoom at page load or when switching device orientation. Setting the initial scale to 1.0 assures that content is displayed correctly.
To fix this, employ the recommended viewport setting:
<meta name="viewport" content="width=device-width, initial-scale=1">