Okuzeka
Web Development vocabulary · CSS and Layout

Viewport

Meaning in web development, with examples

/ˈvjuːpɔːrt/nounCommon term

In web development, viewport means: The visible area of a web page inside the browser window or phone screen, which changes size when the window is resized or the phone is rotated.

In Turkish: görüntü alanı, viewport

How it is used

Responsive pages need the viewport meta tag (width=device-width, initial-scale=1). The CSS units vw and vh are percentages of the viewport's width and height, and 'above the fold' means inside the first viewport.

Example sentences

  1. Without the viewport meta tag, the phone shows a tiny desktop version of the page.

  2. The hero image should fill the whole viewport on desktop.

Common collocations

  • viewport meta tag
  • viewport width
  • small viewports
  • fill the viewport
  • responsive designAn approach to building pages so that the same layout adapts to any screen size, from phones and tablets to large monitors.
  • media queryA CSS rule that applies styles only when a condition is true, such as a minimum screen width, dark mode or printing.
  • breakpointA screen width at which a responsive layout changes, for example from one column on phones to three columns on desktops.
  • meta tagAn HTML tag in the head of a page that gives browsers and search engines information about the page, such as its description or viewport settings.

This word in other fields

The same English word can have a different meaning in another field:

More terms: CSS and Layout

Practise with graded reading

Reading at the right level is the fastest way to make new words stick. Pick free English books by level: