The URL being analyzed includes a viewport <meta> tag that designates a particular width.
Why is this important?
The area where web content is visible within a browser window is referred to as the viewport. Depending on the device, the viewport size varies and is usually smaller on mobile phones than on computer screens. With the viewport <meta> element, you tell the browser how to manage the dimensions and scaling of the page.
By using 'width=device-width' in your viewport <meta> element, you ensure that your page dimensions accommodate various devices, by equating to the width in independent pixels. On the other hand, setting a specific pixel width forces mobile browsers to display the page at this width on all devices, adapting content by scaling and enlarging fonts to fit the screen, potentially leading to inconsistent font sizes and necessitating user actions such as double-tapping or pinching to zoom for better interaction with the content.
What does the Optimization check?
The Optimization is activated for any internal URL hosting a viewport <meta> tag with a designated width.
Examples that trigger this Optimization:
Any URL that contains a viewport <meta> tag within the <head> and specifies a particular number of pixels as its width would trigger this Optimization:
<!doctype html><html lang="en"><head> <meta name="viewport" content="width=600, initial-scale=1"> ...</head><body>...</body></html>
How do you resolve this issue?
To rectify this issue, assign 'device-width' to your viewport's width, advising the browser to align the width with the device's independent pixels, e.g.,
<meta name="viewport" content="width=device-width, initial-scale=1">
Comments