What is Viewport ?

Viewport tell the browser , which device are using , means desktop or mobile & set the zoom level of web-pages according to device width. using viewport we can make responsive websites.

Live example below ↓

index.html - ↓ paste inside head section

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

how viewport does see below ↓ example.

  • name="viewport" → tell the browser how to control the page's dimensions and scaling.

  • content="width=device-width → sets the width of the page according to the screen of the devices.

  • content="initial-scale=1.0 → mange the zoom level of the page .

Note -if you want to check just right click and inspect the code & switch the mobile mode with viewport code or without viewport code then see the result . start your experiment just paste above code in head section & follow the rule here .