Title: Viewport Author: Kriko Published: Apr 28, 2021 Last modified: Jul 11, 2026 --- 1. [Home](https://kriko.io/) / 2. [Glossary](https://kriko.io/glossary) / 3. V Letter # Viewport **Viewport** refers to the visible area of a web page inside a user’s browser. It can also be described as the viewing area of the page. When a user opens a website, the part of the page that is visible on the screen is considered the viewport. The content that remains below and requires scrolling is not part of the viewport at that moment. Viewport and screen size are not the same thing. Screen size refers to the physical dimensions of the device, while viewport refers to the visible area allocated to the web page inside the browser window. For example, a phone may have a fixed physical screen size, but its viewport can vary depending on resolution, pixel density, browser interface and scaling settings. On desktop devices, the viewport changes when the user resizes the browser window. To understand the concept more clearly, it is useful to distinguish between device, screen and browser. **Device** refers to the hardware used to access a website, such as a smartphone, tablet, laptop or desktop computer. Screen describes the physical display and its resolution. Browser refers to software such as Google Chrome, Safari, Firefox or Microsoft Edge that displays web pages. Viewport is the visible section of the web page inside that browser. Before mobile devices became widely used, many websites were designed mainly for desktop screens. Today, users access websites from phones, tablets, laptops and devices with many different screen sizes. This makes responsive web design highly important. Responsive design adjusts the layout, text sizes, images and navigation structure of a page according to different viewport widths. Mobile-friendly websites usually use the viewport meta tag. This tag tells the browser how the page should be scaled according to the device width. In common usage, the viewport width is set to match the device width and the initial scale is defined as 1. This helps prevent the page from opening at a desktop width or being unnecessarily scaled down on mobile devices. Viewport configuration alone is not enough for mobile compatibility. The CSS structure, breakpoints, flexible grid system, image sizes, readable typography and touch-friendly user experience should also be planned correctly. For example, sections that appear side by side on desktop may be stacked vertically on mobile, navigation can become more compact and buttons can be designed at a size suitable for tapping. A properly configured **viewport** and responsive design approach help make a website more usable and accessible across different devices. ## Discover it in the dictionary ### R Programming Language R is an open-source programming language and software environment widely used for statistical computing, data analysis and graphics. It was initially developed in the… ### Cost Per Mille (CPM) CPM, short for Cost Per Mille or Cost Per Thousand Impressions, is a digital advertising metric that shows the average cost of one thousand… ### Search Engine Results Page (SERP) SERP stands for Search Engine Results Page. It refers to the results page shown when a user enters a query into Google, Bing, Yandex… ### Responsive Design Responsive Design is a web design approach that allows a website to adapt its layout flexibly to different screen sizes, device types and viewing… ### Operational Resilience Operational resilience refers to an organisation’s ability to maintain critical services during disruptions, crises and unexpected changes. It covers not only the protection of… ### WordPress WordPress is an open-source content management system that was launched in 2003 and is widely used for building websites. It can be used to… ### Database Shrink Database shrink is the process of reducing the physical size of a database data or log file and returning unused space to the operating… ### Hreflang Tag The hreflang tag is an HTML annotation used on multilingual or multi-regional websites to tell search engines about different language and country versions of… ### ETL ETL is a data processing method used to collect, organise and transfer data in a structured and systematic manner. In this process, data is… ## Track the digital heartbeat with Kriko Subscribe to receive curated insights, news, and ideas shaping the digital landscape. By checking this box, you acknowledge and accept our [privacy policy](https://kriko.io/privacy-policy).