Viewport device width javascript

JavaScripting

The definitive source of the best
JavaScript libraries, frameworks, and plugins.

From our blog

Viewport

Viewport

Viewport is a component to ease viewport management. You can get the dimensions of the viewport and beyond, which can be quite helpful to perform some checks with JavaScript.

Installation

Standalone

Also, you can use it without components.

Usage

First, add the following meta viewport:

Then, initialize the Viewport:

var viewport = require('viewport'); 

viewport.height // Returns the current height of the viewport. (Read below the API) 

Browser Support

• Chrome (OS X, Windows)
• Firefox (OS X, Windows)
• Opera (OS X, Windows)
• Safari (OS X, Windows)
• IE10+

API

Viewport#width

Returns the current width of viewport (in pixels).

Viewport#height

Returns the current height of viewport (in pixels).

Viewport#calculateDimensions()

Calculates/updates the dimensions ( width and height ) of viewport (in pixels).

Viewport#top

Returns offset top of viewport.

Viewport#right

Returns offset right of viewport.

Viewport#bottom

Returns offset bottom of viewport.

Viewport#left

Returns offset left of viewport.

Viewport#calculateOffset()

Calculates/updates the viewport position.

Viewport#scrollY

Returns vertical scroll position of viewport.

Viewport#scrollX

Returns horizontal scroll position of viewport.

Viewport#calculateScroll()

Calculates/updates the scroll positions ( scrollY and scrollX ) of viewport.

Viewport#orientation

Returns the device orientation: portrait-primary , portrait-secondary , landscape-primary , landscape-secondary .

Viewport#calculateOrientation()

Calculates/updates the device orientation .

Viewport#device

Device size is static and doesn’t change when the page is resized. Returns an object with size of device ( width and height ).

Viewport#inViewport()

Calculate if an element is completely located in the viewport. Returns boolean.

Viewport#isVisible()

Calculates if an element is visible in the viewport. Returns boolean.

Viewport#refresh()

Updates the viewport dimension, viewport positions and orientation.

Events

• scroll : emitted when the viewport are scrolled.
• resize : emitted when the dimensions of the viewport changes.
• bottom : emitted when the viewport position is the bottom.
• top : emitted when the viewport position is the top.

With :heart: by

• Guille Paz (Frontend developer | Web standards lover)
• E-mail: guille87paz@gmail.com
• Twitter: @pazguille
• Web: https://pazguille.me

License

MIT license. Copyright © 2016.

About our sponsor

Salsita Software is a professional software consulting company specializing in the development of complex, modern web applications and HTML5-based apps. We use agile software development methodologies to deliver sophisticated, reliable, cutting-edge web and mobile apps.

Latest tweets

Conceived by Konstantin. Managed by Salsita © 2014 Salsita Software. All rights reserved.

Источник

A complete guide to get viewport, device and document sizes with JavaScript

JavaScript provides a native API to get the width and height of a viewport. But it’s important to understand the difference between what sizes you are getting as it may cause you some trouble.

When making calculations you have to distinguish between viewport, device, and document. Because at times the values of all three may be the same. However they may sound and look as if they are the same, but really these are three different concepts.

Viewport size

In web development terms the viewport is treated the same as the browser window, including the rendered scrollbar if any.

MDN distinct two types of viewports:

• Layout viewport — the area which is available to be seen;
• Visual viewport — the portion of the viewport that is currently visible (e.g. zoomed area on a mobile device).

When we’re talking about the viewport for the most part we’re talking about the Layout viewport. There are 2 ways to get the width and height of the viewport (Layout viewport):

1. innerWidth and innerHeight properties

The innerWidth property returns the interior width of the window in pixels (including the width of the scroll bar, if one is present).

const viewportWidth = window.innerWidth 

The innerHeight property returns the interior height of the window in pixels (including the height of the scroll bar, if one is present).

const viewportHeight = window.innerHeight 

Both properties return the integer value and are read-only.

Browser Support: innerWidth and innerHeight supported by all browsers.

2. outerWidth and outerHeight properties

The outerWidth read-only property returns the width of the outside of the browser window. It represents the width of the whole browser window including sidebar (if expanded), window chrome and window resizing borders/handles.

const browserWidth = window.outerWidth 

The outerHeight read-only property returns the height in pixels of the whole browser window, including any sidebar, window chrome, and window-resizing borders/handles.

const browserHeight = window.outerHeight 

Both properties return the integer value and are read-only.

Browser Support: outerWidth and outerHeight supported by all browsers.

Device size

The device size is often referred to as a screen or display size. This is the size of an actual area of the device where users see the content. Unlike viewport or document size the values of the screen (display) remain unaltered.

To get the size of the screen the window.screen property can be used. It is a part of the Screen API. The screen property returns an object that contains data about the current screen.

Some of the properties of the screen object can be utilized to get the size of the screen.

screen.width property returns a screen width in pixels. The returned value is an integer and read-only.

const screenWidth = window.screen.width 

screen.height property returns a screen height in pixels. The returned value is an integer and read-only.

const screenHeight = window.screen.height 

Browser support: Screen API supported in all browsers.

Document size

The following ways will get the size of the document. Now the difference from the viewport is that the document can be larger than the viewport itself. Also, other things need to be considered. But let’s move step by step.

To get the size of the document you need to get the html element that represents the document. The document.documentElement property returns the root element of the current document, that is html .

1. clientWidth and clientSize properties

While the clientWidth property returns the inner width of an element in pixels. Initially, it includes paddings but excludes borders, margins, and scrollbars. But for html element it’s a special case and the viewport width is returned (in pixels), excluding scrollbar width.

const documentWidth = document.documentElement.clientWidth 

The clientHeight property returns the inner height of an element. Just like with the clientWidth , the clientHeight is a special case when used on the html element. And it returns the viewport height (in pixels), excluding scrollbar height.

const documentHeight = document.documentElement.clientHeight 

When using these properties the scrollbar width and height are excluded — this is another thing to consider I mentioned before.

Note: even if the html element has the CSS width or height rules applied, the clientWidth and clientHeight properties will always return viewport width and height (without scrollbars).

Browser Support: clientWidth and clientHeight supported by all browsers.

2. offsetWidth and offsetHeight properties

The HTMLElement.offsetWidth property can be used on an html element to determine the width of the document. Note: that the document width can be larger than the viewport width.

The HTMLElement.offsetWidth read-only property returns the integer value of the width of an element. offsetWidth includes any borders, padding, and vertical scrollbars (if rendered).

const documentWidth = document.documentElement.offsetWidth 

The HTMLElement.offsetHeight property can be used on an html element to determine the height of the document. Note: that the document height can be larger than the viewport height.

The HTMLElement.offsetHeight read-only property returns the integer value of the height of an element. offsetHeight includes any borders, padding, and horizontal scrollbars (if rendered).

const documentHeight = document.documentElement.offsetHeight 

Browser Support: offsetWidth and offsetHeight supported by all browsers.

3. scrollWidth and scrollHeight properties

The scrollWidth property returns the width of an element, including the part that is not visible on the screen due to overflow. This is a read-only integer value that includes the element’s padding, but not its border, margin, or vertical scrollbar (if present).

const documentWidth = document.documentElement.scrollWidth 

The scrollHeight property returns the height of an element, including the part that is not visible on the screen due to overflow. This is a read-only integer value that includes the element’s padding, but not its border, margin, or horizontal scrollbar (if present).

const documentHeight = document.documentElement.scrollHeight 

Browser Support: scrollWidth and scrollHeight supported by all browsers.

Final thoughts

To help you understand and remember the difference think of it this way, you have a laptop (device) on which you open the browser (viewport) to view the web page (document).

Device size is always fixed, while viewport and document can change in size.

Источник

How to get the Width and Height of Browser’s Viewport in JavaScript

The browser is the program that takes your HTML, CSS, and JavaScript, and renders it on the screen.

With that being said, the actual size of the canvas is going to be different depending on the screen size, browser, device type, and other factors.

For example, mobile phones will have a smaller viewport than desktop computers.

Because of this, as front-end developers, we need a way to get the size of the viewport of the browser so we can use it in things like calculations and position.

In this post, we’ll learn the best way to get the viewport using JavaScript.

Getting the Viewport size using JavaScript

To get the width and height of a viewport, we can use the innerWidth and innerHeight properties of the window object.

The window property has a lot of useful properties and methods that we can use to get information about the browser, including the viewport’s width and height.

Here’s an example of how we can use these properties to get the viewport’s width and height.

Keep in mind that this value will change if the browser is resized, so if you need the values, you’ll need to get them every time you need them.

Alternatively, you can also attach an event listener so you can run some code when the viewport’s size changes.

Conclusion

In this post, we learned at how to get the viewport’s width and height using JavaScript.

Just read the innerWidth and innerHeight properties of the window object to get the viewport’s width and height.

Hopefully, this has been useful to you. Thanks for reading!

If you want to learn about web development, founding a start-up, bootstrapping a SaaS, and more, follow me on Twitter! You can also join the conversation over at our official Discord!

Give feedback on this page , tweet at us, or join our Discord !

Источник