What is my viewport

Difference between Viewport and Resolution

The Pixel & Pixel Per Inch

Mobile and other similar devices’ screens are contained on pixels (individual points of color) and together when all pixel display feels like an image. Number of pixels on the horizontal axis and the number of pixels on vertical axis called resolution. The sharpness of images/text or anything which is displayed on a screen depends on the resolution and screen size. The same pixel resolution will show sharper on a smaller screen and gradually lose sharpness on large screens because the same number of pixels are being spread over a large n number of inches.

Normally the screen’s physical size calculated in inches and as resolution depends on the screen’s physical size so to determine screen’s resolution unit is called Pixels Per Inch.

Viewport

Device’s visible area for a user is called, the actual viewport size of the screen.

Viewport screen size

Viewport screen size is the actual resolution of any screen and it depends how much unit of pixels per inch simply. Viewport always remains same in terms of screen size as screen size remains same but resolution to display it, is changeable for example old 15″ monitors can display different resolutions from 800 x 600, 1024 x 768 and 1280 x 1023 so it depends on focus ability of a screen.

Note that As resolution goes smaller from its original or maximum display resolution, you will get blurry results because the same number of pixels is now spreading on big viewport size.

CSS Pixel Ratio

Resolution, Viewport and CSS Pixel Ratio

The resolution depends on CSS pixel ratio. If cases pixel ratio increases the resolution of the device can be increased, but remember viewport of size, which is the actual visible size of the screen will not change. The maximum resolution of a screen is actually a multiplier of CSS pixel ratio.

Example

iPhone 7
Viewport size: 375 x 667 Pixels
Resolution: 750 x 1334 Pixels
Pixel Density:

326 ppi
CSS Pixel Ratio: 2

Disclaimer: Information collected from different top relevent websites. It is tried to keep the information correct.
If you find anything wrong email us [email protected]

What is my screen size?

Your current screen size is

What is my screen resolution?

The numbers above represent the viewport size of your current screen, which is the visible display area of your screen. This is often slightly smaller than your screen resolution. A web design viewport is defined as a rectangular area (measured in pixels) that is displayed on the screen and determines how the content is arranged and where to scroll through the text wrappers or windows to see the entire web page.

Is the viewport the same as the screen resolution?

For most devices, the resolution/size of the screen is the same as the viewport size. This is true for most desktop computers and laptops, but is almost never true for mobile devices and tablets! Many phone browsers scale web pages to a larger screen width to put them on the screen. This is sometimes called overview mode. These browsers allow the user to zoom in and out of the pages to see the bit they want to see. For example, while the screen width of a device can be 320px, the viewport can be 980px wide. In this case, a web page designed for 980px or less will fit across the entire screen. I am typically using 1000px and 690px as the main breakpoints on websites I design as that seems to cover a lot of good ground for most modern devices.

Screen resolution is not a useful indicator for browser window size.

Desktop screens have increased significantly over the last decade, but browser display screens (the visible area in the browser window) pretty much have not. A little while back, CSS-Tricks discovered that only 1% of users have full screen navigation. While only 9% of visitors to this site had a screen width of less than 1200px. Their take is that even though lots of users run big monitors these days, not all of them are viewing websites in ‘full screen resolution’, therefore the viewport size of the website is much smaller than the screen resolution of their monitor.

What is my screen size?

Where the confusion begins with screensizes and viewports is usually due to phone manufacturers misleading consumers:

For a lot of devices, the resolution specified by the manufacturer often doesn’t refer to PPI (pixels per inch) which is a better way to think about resolution. You can see this by looking at iPhone screen sizes for the past few years. The physical dimensions of the screen have hardly changed (see the CSS widths of iPhone 6 compared to iPhone X), but the resolution has increased almost 60%. So what you’re getting is a new device with the same physical size of an older, lower resolution device, but they have jammed much more PPI in to the screen. Following?

Now you’ve read a little more about screen resolutions and device viewports and hopefully I have answered your what is my screensize question? There’s some more good info if you’d like to keep reading on these topics over at the Android website.

If you’d like a detailed list of different devices’ viewport sizes, pixel dimensiosn and CSS widths I’ve compiled all the info I can on this viewports list.

What is a viewport?

What is a viewport really? The term viewport refers to the size of the window or the area visible on the screen. In general, this term is used to refer to displays on mobile devices such as smartphones and tablets. A more specific meaning of the term viewport refers to the meta element in HTML5, which plays a crucial role in optimizing mobile devices. This element dimensions the displayed content in such a way that the screen size can be used effectively. In this case, the meta-element viewport screen ensures that all content is displayed in the same readability and accuracy on screens of different sizes. The viewport element adapts web pages to the length and width of the screen so that mobile browsers can display all content correctly.

The General Understanding of Viewports

Thanks to the viewing port, sites on mobile devices are not displayed in the same way as on the desktop screen. Users do not need to zoom in, but can view the content of the page in a way that matches the small screen. Viewports as meta elements (combined with responsive web design) help browsers break pages and collect them on small screens so users can get a meaningful and readable image. In this way, viewports are charged with preventing viewing problems by defining output formats adapted to the mobile device in question.

The viewports functionality in HTML code or CSS

You can integrate viewports into your HTML files in two different ways: directly into a document or a CSS-linked file, and the syntax of the two alternatives is only slightly different.

If you want to include a viewport directly in your HTML file as a meta tag, you can use the following code:

If you specify a viewport in a CSS file, you should place it right at the beginning of the file to ensure that it is displayed correctly.

Problems & Possibilities

The main difficulty with display windows is that the number of mobile devices with different sizes is increasing. However, in order to obtain an optimal display of information on all available devices, various tools and software are available to verify that the information is displayed correctly on standard mobile devices. Such tools include iOS MIH-Tool, Ghostlab and Adobe Edge Inspect. The latter is also available for Windows. In addition to these test tools, we recommend that you run actual tests on your own smartphone.

Another challenge is pixel density. After all, it’s not screen size but pixel depth that matters for viewing on mobile devices. Although pixels are constant units, mobile devices often have a higher pixel density than older computers. For this reason, it is important for developers to consider how much content should be displayed and whether scaling makes sense.

Viewport Sizes & Thoughts

Viewports must be specified in HTML code or CSS file for all sites to ensure they are displayed on mobile devices accordingly. Especially in the context of agile web design, viewports are indispensable and have become an optimization standard for mobile devices. All website operators who want to offer their users a pleasant and discreet reading and browsing experience should turn to this topic, as the number of mobile users is constantly growing.

Finally, a simple solution to US sales tax in WooCommerce.

Get all 50 US state’s sales tax rates in one CSV file. Instant download, install in 1-click.
Learn More

Looking for something without the clutter? Try the Lite Version of our tool.

Viewport concepts

This article explains the concept of the viewport — what it is, its impact in terms of CSS, SVG, and mobile devices — and differentiates between the visual viewport and the layout viewport.

What is a viewport?

A viewport represents the area in computer graphics being currently viewed. In web browser terms, it is generally the same as the browser window, excluding the UI, menu bar, etc. That is the part of the document you are viewing.

Documents like this article may be very long. Your viewport is everything that is currently visible, notably, the «what is a viewport» section, and perhaps some of the navigation menu. The size of the viewport depends on the size of the screen, whether the browser is in fullscreen mode or not, and whether or not the user zoomed in. Content outside the viewport, such as the See Also section in this document, is likely to not be visible onscreen until scrolled into view.

To recap, the viewport is basically the part of the document that is currently visible.

Viewport sizes are mutable

The width of the viewport is not always the width of the window. If you query the width or height of the window and document in Chrome or Firefox, you may get:

There are several DOM properties that can help you query viewport size, and other similar lengths:

The area within the innerHeight and innerWidth is generally considered the layout viewport. The browser chrome is not considered part of the viewport.

The viewport was originally 1200 x 800 pixels. Upon zooming in, the viewport became 800 x 533 pixels. This is the layout viewport. Sticky headers or footers, with the following styles, will stick to the top and bottom of the layout viewport respectively.

We got the 800 x 533 measurement when we zoomed in using the keyboard. The header and footer stayed flush against the top and bottom of the window. But what if we had pinched-zoomed on a tablet? What if a dynamic keyboard pops open on a phone?

The web contains two viewports, the layout viewport and the visual viewport. The visual viewport is the part of the web page that is currently visible in the browser and can change. When the user pinch-zooms the page, pops open a dynamic keyboard, or when a previously hidden address bar becomes visible, the visual viewport shrinks but the layout viewport is unchanged.

Sticky headers or footers, as discussed above, stick to the top and bottom of the layout viewport, and therefore remain in view when we zoom in with the keyboard. If you pinch-zoom, the layout viewport may not be fully visible. If you magnify from the middle of the layout viewport, the content will expand in all four directions. If you have a sticky header or footer, they will still be stuck to the top or bottom of the layout viewport, but they may not be visible at the top and bottom of the device’s screen — which is the visual viewport. The visual viewport is the currently visible portion of the layout viewport. If you scroll down, you are changing the contents of the visual viewport and bringing the bottom of the layout viewport into view, displaying the sticky footer, which will then stay stuck at the bottom.

The visual viewport is the visual portion of a screen not including on-screen keyboards, areas outside of a pinch-zoom area, or other feature that doesn’t scale with the dimensions of a page. The visual viewport is the same size as the layout viewport or smaller.

For a page containing iframes, objects, or external SVG, both the containing pages and each included file has their own unique window object. Only the top-level window has a visual viewport that may be distinct from the layout viewport. For included documents, the visual viewport and layout viewport are the same.

The layout viewport and visual viewport described above are not the only viewports you will encounter. Any sub-viewport that is fully or partially displayed within the layout viewport is considered a visual viewport.

We generally think of width and height media queries as being relative to the width and height of the browser window. They are actually relative to the viewport, which is the window in the main document but is the intrinsic size of the element’s parent in a nested browsing context like objects, iframes and SVG. In CSS, we also have length units based on the viewport size. A vh unit is 1% of the layout viewport’s height. Similarly, the vw unit is 1% of the layout viewport’s width.

Inside an iframe, the visual viewport is the size of the inner width and height of the iframe, rather than the parent document. You can set any height and width on an iframe, but the whole document may not be visible.

If you use viewport length units in your CSS within the iframe document, 1vh will be 1% of the height of the iframe, and 1vw will be 1% of the width of the document.

A width-based media query within the iframe document is relative to the iframe’s viewport.

If the above CSS is included in the iframe, the paragraphs will become red when the user has zoomed in, but this style does not apply in the non-zoomed-in state.

In an SVG document, the viewport is the visible area of the SVG image. You can set any height and width on an SVG, but the whole image might not be visible. The area that is visible is called the viewport. The size of the viewport can be defined using the width and height attributes of the element.

In this example, the viewport has an aspect ratio of 3:4 and is, by default, 400 by 300 units, with a unit generally being a CSS pixel.

SVG also has an internal coordinate system defined via the viewbox attribute, which is not related to this viewport discussion.

If you include an SVG file in your HTML, the viewport of the SVG is the initial containing block, or the width and height of the SVG container. Using the @media query in your SVG’s CSS is relative to that container, not the browser.

Generally, when you write the above media query, the styles are applied if the viewport, generally the browser window, is between 400px and 500px, inclusive. The width media query in the SVG is based on the element in which the SVG is contained — the if the source is an SVG file, the SVG itself if the SVG is included directly into the HTML, or the parent if the parent element has a width assigned and — not the viewport’s width. With the above media query being in our SVG file, the CSS is applied if the SVG container is between 400 and 500px.

JavaScript

The Visual Viewport API provides a mechanism for querying and modifying the properties of the visual viewport.

Mobile Viewports

Mobile devices come in all shapes and sizes, with screens of differing device pixel ratios. The mobile browser’s viewport is the area of the window in which web content can be seen, which is not necessarily the same size as the rendered page. Mobile browsers render pages in a virtual window or viewport, generally at 980px, which is usually wider than the screen, and then shrink the rendered result down so it can all be seen at once. Users can then pan and zoom to see different areas of the page. For example, if a mobile screen has a width of 320px, a website might be rendered with a virtual viewport of 980px, and then it will be shrunk down to fit into the 320px space, which, depending on the design, is illegible for many if not everyone. To tell a mobile browser to use the viewport width instead of the default 980px as the width of the screen, developers can include a viewport meta tag, like the following:

What is The Viewport?

The viewport is the user’s visible area of a web page.

The viewport varies with the device, and will be smaller on a mobile phone than on a computer screen.

Before tablets and mobile phones, web pages were designed only for computer screens, and it was common for web pages to have a static design and a fixed size.

Then, when we started surfing the internet using tablets and mobile phones, fixed size web pages were too large to fit the viewport. To fix this, browsers on those devices scaled down the entire web page to fit the screen.

This was not perfect!! But a quick fix.

Setting The Viewport

HTML5 introduced a method to let web designers take control over the viewport, through the tag.

You should include the following viewport element in all your web pages:

This gives the browser instructions on how to control the page’s dimensions and scaling.

The width=device-width part sets the width of the page to follow the screen-width of the device (which will vary depending on the device).

The initial-scale=1.0 part sets the initial zoom level when the page is first loaded by the browser.

Here is an example of a web page without the viewport meta tag, and the same web page with the viewport meta tag:

Tip: If you are browsing this page with a phone or a tablet, you can click on the two links above to see the difference.

Size Content to The Viewport

So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience.

Some additional rules to follow: