Loud Interactive has observed that the queried URL includes a viewport <meta> tag that lacks a width attribute.
Why is this important?
Understand that the viewport is the browser window’s section where you can see website content. The viewport size changes with the gadget. It's smaller on mobile compared to desktop. A viewport <meta> element gives browsers directions on managing the dimensions and scale of the page.
Using 'width=device-width' in your viewport <meta> tag lets the page match the device's width in pixels that work across all devices. If the width isn't specified, browsers on mobile will default to desktop-width layouts, trying to adapt by scaling or enlarging text, potentially causing inconsistencies for users who may need to zoom or tap to interact properly.
What does the Optimization check?
The Optimization is meant to activate when it finds an internal URL housing a viewport <meta> tag lacking a width setting.
Examples that trigger this Optimization:
Any URL incorporating a viewport <meta> tag without a width value in the <head> section will trigger this Optimization. For example:
<!doctype html><html lang="en"><head> <meta name="viewport" content="initial-scale=1"> ...</head><body>...</body></html>
How do you resolve this issue?
To fix this, ensure the viewport width is specified as 'device-width' to instruct the browser to adhere to the device's width.
For instance:
<meta name="viewport" content="width=device-width, initial-scale=1">