initial-scale is a setting in the HTML viewport meta tag that controls how much the page is zoomed when it first loads on a device, especially on mobile screens.
📌 Where it is used
<meta name="viewport" content="width=device-width, initial-scale=1.0">
🧠 What initial-scale means
- It defines the initial zoom level
1.0= 100% zoom (no zoom in or out)- Values:
initial-scale=1.0→ normal sizeinitial-scale=2.0→ zoomed ininitial-scale=0.5→ zoomed out
📱 Why it is important
Without initial-scale:
- Mobile browsers may zoom out
- Text looks small
- Layout appears shrunk
With it:
- Page fits the screen properly
- Responsive layouts behave correctly
- Better readability on mobile devices
✅ Best practice
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This ensures:
- Page width matches device width
- No unexpected zoom on load
🎯 Short interview answer
initial-scaledefines the initial zoom level of a webpage when it is first loaded on a device. Setting it to1.0ensures the page is displayed at its natural size, which is essential for responsive design on mobile devices.
⭐ One-line summary
initial-scale controls how zoomed in or out a page is when it first loads on mobile screens.
