Detailed answer
A viewport setting helps a page use device width rather than a wider layout viewport.
Pair it with flexible layout and responsive CSS. Keep zoom available for people who need enlarged text and controls. Adding the meta tag alone cannot fix a page whose content has rigid oversized dimensions.
Example
<meta name="viewport" content="width=device-width, initial-scale=1">
Understanding the behavior
Viewport metadata lets mobile browsers use a layout viewport related to the device width rather than a wide desktop-style default. It does not make fixed-width content responsive on its own. CSS, media and text still need to fit the available space.
Practical implementation notes
Check narrow screens with real content and zoom enabled. Avoid disabling user scaling; fix overflowing containers, oversized media and long strings rather than restricting how a visitor can enlarge the page.
How to check it
Add viewport metadata, then check widths and zoom with responsive CSS.
Expected result
The layout can use device width and users can still zoom.
Watch out: Avoid user-scalable=no and restrictive maximum-scale settings.
Read the reference ↗