So mobile browsers use the real screen width instead of emulating a ~980px desktop

To prevent users from zooming the page with gestures on mobile

So the browser loads lightweight mobile versions of styles and images

HTML & CSS · Junior · Question 26 of 75

Why do you need `<meta name="viewport" content="width=device-width, initial-scale=1">`?

✓Correct answer: So mobile browsers use the real screen width instead of emulating a ~980px desktop
2To prevent users from zooming the page with gestures on mobile
3So the browser loads lightweight mobile versions of styles and images

Explanation

Without this tag, mobile browsers render the page as if on a wide screen and scale it down - mobile media queries don't fire and text is tiny. Disabling zoom (user-scalable=no) is bad for accessibility. The tag doesn't affect loading speed.

Why do you need `<meta name="viewport" content="width=device-width, initial-scale=1">`?

Explanation

Further reading

Problem with a question

Test yourself

Why do you need <meta name="viewport" content="width=device-width, initial-scale=1">?

Explanation

Further reading

Test yourself

Why do you need `<meta name="viewport" content="width=device-width, initial-scale=1">`?