Poor mobile viewport meta configuration

Problem Summary

Poor mobile viewport meta configuration prevents pages from scaling correctly on mobile devices.

Performance Impact

• Bad usability: Text and controls may render too small or too wide
• Layout instability: Responsive CSS can behave unpredictably
• Failed mobile checks: Search and audit tools may flag mobile usability problems
• Interaction friction: Users may need to zoom or scroll horizontally

How to Detect

1. Page source: Check for a viewport meta tag in the head
2. Mobile emulation: Test common phone widths in DevTools
3. Search Console: Review mobile usability reports

Solutions

1. Use a Standard Viewport Tag

<meta name="viewport" content="width=device-width, initial-scale=1">

2. Avoid Disabling Zoom

Do not use user-scalable=no unless there is an exceptional accessibility-aware reason.

3. Fix Wide Elements

Tables, sliders, images, and code blocks should not force horizontal scrolling.

4. Test Real Content

Responsive issues often appear with long titles, menus, and embedded media.