We Keep Coding

Google Chrome Dev Tools width is different from window.innerWidth

How can I make Google Chrome Dev Tools width the same as window.innerWidth
PS: window.screen.width solved my problem

I had the same problem ..... I had a js function that styles and arranges elements .... it has 2event listeners on load and on resize..... on Desktop Mode Evrything works fine ok both load and resize ..... But When i swith to mobile type from dev tools all the elements that use innerWidth as a variable get disturbed ..... this mainly happened because i didn't set the width of an image to 100% of its cotainer wich allowed it to be at it's original size and overflow the innerWidth .... try to find elements that overflows the width of your viewport before js is loaded..... if you set a div with a width that is higher than your device width the innerWidth property gets disturbed ..... but only on mobile mode devtools the desktop mode works fine and im wondering if the problem is related to chrome devtools or the mobiles would really get the wrong innerwidth value ... after checking the element that causes the problem you can adjust its width directly from html css or set up its width with js before you start using the innerwidth property ... thus problem has confuded me and made me wanna launch automated tests because its unexpected and since i use the innerWidth a lot .... PS:Screenwidth will solve your problem but it will always get the screen size not the viewport size ... for mobiles and tablets thats going to work fine since they are always full screen but for desktop thats not going to work when you resize the browser window ... and maybe one day tabets and large mobile will allow users to resize their screens

You should make a generic function.
function paginate(array, page_size, page_number) {
return array.slice((page_number - 1) * page_size, page_number * page_size);
}
called this function whenever your screen size changes. First, try to get the data accordingly then fix the UI with CSS.

get the browser's sceen height, when the console is open

in order to get the browser's screen height,
window.innerHeight in js and
$(window).height() in jquery is used.
i have a modal(popup) which i calculate and refresh it's position(i make it center aligned) when it's inner html is changed.
so first i need to compare the modal's new height to the browser screen's height before positioning.
Problem:
the problem i have is that when the browser's console is open, the code above doesn't give me the browsers screen height, i gives a much less number
browser height is less when console is opened

To find the entire height,
window.outerHeight
or
screen.availHeight
can be used. This will not consider the console size.

Get browser window width including scrollbar

I tried to get browser window width with $(window).width();. On IE 10, it does return the full browser width, include the scroll bar. However, on Firefox and Chrome, both return the value without the scroll bar.
How can I get the browser width include with the scroll bar together? Because I need the detected width to be exactly same as CSS.
Thanks.

The first answer was close, but upon further inspection it is a bit more complicated. The body.clientWidth is the width excluding the scrollbars. The window.outerWidth is the width including the scrollbars and other window elements like the window border. The window.innerWidth is the actual width of the window, including scrollbars, but not including the window border.

This will get the full Window's width:
window.outerWidth
NOTE: jQuery's outerWidth() doesn’t work on $(window)

window.innerWidth seems to be the correct answer when needed for responsive design

window.innerWidth will give the width of the HTML and the scrollbar. This value is the value used for device width breakpoints when using media queries in CSS. Essentially, window.innerWidth is equal to the calculated CSS unit 100vw. However, window.outerWidth will give you the width of the entire window.
For example, if you had Chrome's Dev Tools open inside of the browser, window.outerWidth would be the width of the webpage + scroll bar + Chrome's Dev Tools inspector. While window.innerWidth would return the width of just the webpage + scroll bar.

keeping a division visible in the screen

I am creating a web page in which when user hovers on an image it displays a paragraph which is enclosed in a division under it. When the user moves the cursur out of the image the division disappears.
My problem is that when the user clicks the image which is in the bottom of the screen.. i want the page to be scrolled using javascript until the division at the bottom is visible...
I want to know how to do this one. Which function to use??
Thanks in Advance..

Basically you will need to calculate height of your browser window.... then also know the height of your image and it's offset (i.e. where it is placed)...
doing some maths you will get the additional page scroll you want to have...
simply do it...
Here are some functions for you:
in Internet Explorer (backward-compatibility mode):
document.body.offsetWidth, document.body.offsetHeight
in Internet Explorer (standards mode, document.compatMode=='CSS1Compat'):
document.documentElement.offsetWidth, document.documentElement.offsetHeight
in most other browsers – as well as IE9 (standards mode):
window.innerWidth, window.innerHeight (the page's visible width/height)
window.outerWidth, window.outerHeight (the browser outer width/height)
take directly from here: http://www.javascripter.net/faq/browserw.htm
you can check more specific examples here on how to calculate required parameters.

Is there a way to measure the height of what's visible to the user in his website?

I want to measure the height of the visible content area (that means - the top side of it is located where I start to see the site's content and that it ends where I have the windows or mac task panel) in Javascript somehow. It varies from browser to browser and whether I have other panels in the browser then it changes its size.
How can I get this data?

Here are a few useful Javascript (not jQuery) tools you can use to find this:
document.body.offsetWidth
document.body.offsetHeight
These find the Width and Height of the body element (so unless you've done something strange to the body element, then this should work).
You also have:
window.innerWidth
window.innerHeight
These would give you the width of the browser viewport, like antimatterfish said.

Do you mean $(window).height(); and $(window).width(); ? "window" measures the browser viewport...