The referenced URL has a viewport <meta> tag that possesses an initial-scale value diverging from 1.0.
Why is this important?
Web browsers utilize the viewport to determine the visible area of a web page. Since the viewport's size can change depending on the device being used, it's important for content to scale properly. A viewport <meta> tag provides directives on how to manage a page’s dimensions and its scaling capabilities.
The initial-scale value is critical as it defines the zoom level when the page loads or the device's orientation changes. Setting 'initial-scale=1' ensures that one CSS pixel is equal to one device-independent pixel, thus maintaining the contents’ intended design irrespective of whether the device is held in portrait or landscape mode.
What does the Optimization check?
Loud Interactive's Optimization will flag any internal URL that includes a viewport <meta> tag with an initial-scale attribute set to anything other than 1.0.
Examples that trigger this Optimization:
If a webpage contains the following within the <head> section, this would activate the Optimization, since the initial-scale is set to a multiplier that isn’t 1.0:
<!doctype html><html lang="en"><head> <meta name="viewport" content="width=device-width, initial-scale=1.6"> ...</head><body>...</body></html>
How do you resolve this issue?
To avoid unintended zooming, it’s necessary to set the initial scale at 1.0. This aligns the page correctly at the start, or when the device orientation changes.
The following viewport setting is considered standard and reliable:
<meta name="viewport" content="width=device-width, initial-scale=1">