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 ### A Virtual Private Cloud A Virtual Private Cloud, commonly abbreviated as VPC, is a cloud computing model that provides an isolated and customisable virtual network within a public… ### Customer Experience Customer Experience, commonly abbreviated as CX, refers to the overall perception created by all interactions a customer has with a brand. Many touchpoints are… ### Encode Encoding is the process of converting information into a specific format or structure so that it can be transmitted, stored or processed by another… ### Accessibility Accessibility refers to the ability of individuals to access physical, digital, social, cultural and public spaces, products, services and information as independently, safely and… ### Word of Mouth Marketing (WOMM) Word of Mouth Marketing, commonly abbreviated as WOMM, is the marketing effect created when consumers share their opinions about a product, service, brand or… ### SEO-Friendly Content SEO-friendly content refers to website content prepared in a way that aligns with both user search intent and search engine evaluation criteria. SEO stands… ### Data Integration Data integration is the process of bringing information from different sources together within a common structure. Data may be collected, cleansed, transformed and prepared… ### On-page SEO On-page SEO refers to optimisation activities carried out on website pages to make them more understandable, accessible and useful for both search engines and… ### Customer Data Platform (CDP) A Customer Data Platform, commonly abbreviated as CDP, is a software platform that collects and unifies customer data from multiple sources to create centralised… ## 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).