Viewport

A viewport is the visible area of a web page or application on a user's screen at any given moment. On a desktop computer, the viewport corresponds to the browser window minus toolbars, scrollbars, and browser chrome. On tablets and smartphones, the viewport is the full screen area the browser can use. The viewport determines how content is scaled, laid out, and presented to the reader. In HTML, the `<meta name="viewport">` tag tells the browser how to control the page's dimensions and scaling, which is the foundation of [responsive design](/glossary/responsive-design).

Content that ignores viewport differences delivers a poor reading experience on certain devices. Text may be illegibly small on phones, buttons may be impossible to tap, or horizontal scrolling may be required to see the full page. Since mobile devices now account for the majority of web traffic, publications that fail to adapt to different viewport sizes lose readers and appear unprofessional. Search engines also factor mobile-friendliness into rankings, so proper viewport handling affects both user experience and discoverability.

FlipLink publications are fully responsive and adapt automatically to any viewport size. The flipbook viewer detects the available viewport dimensions and adjusts page rendering, control placement, and zoom levels accordingly. On wide desktop viewports, publications display in a two-page [spread](/glossary/page-spread). On narrow mobile viewports, they switch to a single-page view with touch-friendly navigation. The [page experience](/features/page-experience-and-layout) settings let publishers choose between different layout modes, and FlipLink handles the viewport calculations to keep content legible and well-proportioned. When you embed a flipbook using the [responsive embed](/features/sharing-and-distribution) code, it automatically fills its container and responds to viewport changes — including device rotation — without any extra configuration.

The viewport is controlled by the HTML meta tag `<meta name="viewport" content="width=device-width, initial-scale=1">`. This tag tells the browser to set the page width equal to the device's screen width and start at 1x zoom. Without it, mobile browsers render pages at a virtual width of around 980 pixels and then shrink the result to fit, making text tiny and interactions difficult. Key viewport properties include: - **width**: Sets the viewport width. `device-width` matches the screen's actual width in CSS pixels. - **initial-scale**: Controls the zoom level when the page first loads. A value of `1` means no zoom. - **maximum-scale** and **user-scalable**: Control whether users can pinch-to-zoom. Accessibility guidelines recommend allowing zoom. - **viewport-fit**: On devices with notches or rounded corners, `viewport-fit=cover` extends content into the safe area. CSS media queries use viewport dimensions to apply different styles. For example, `@media (max-width: 768px)` targets viewports narrower than 768 CSS pixels, which is a common breakpoint for tablet-to-mobile transitions.

**"Viewport and screen resolution are the same thing."** They are not. A phone might have a screen resolution of 1170 x 2532 physical pixels but a viewport of 390 x 844 CSS pixels. The device pixel ratio (DPR) bridges the gap — on that phone, DPR is 3, meaning each CSS pixel maps to 9 physical pixels. Designers work in CSS pixels (the viewport), not physical resolution. **"Setting `user-scalable=no` improves the experience."** Preventing zoom breaks accessibility for users with vision impairments. Modern web standards and many accessibility audits flag this as a failure. FlipLink's viewer allows pinch-to-zoom by default while maintaining layout integrity. **"Desktop viewport sizes are consistent."** Desktop viewports vary widely. A user with a 27-inch monitor and browser devtools open may have a viewport as narrow as 900 pixels — well within tablet territory. Responsive publications must adapt to actual viewport dimensions, not assumed device categories.

The viewport is the window through which readers see your content. Publications that respond to viewport size deliver a consistent, professional experience across every device — from a 4-inch phone to a 32-inch desktop monitor — without the reader ever noticing the adaptation happening.