We Keep Coding

JavaScript, track window screen width

I have a function that tells what the current width of the user's screen is
but when i resize window to width less than 1024 that function doesnt output width less than 1024
function xxx(){
var x = window.screen.Width
console.log(x)
}
setInterval(xxx, 1000)
output:
1024
even if screen width less than 1024
how can i fix this without using #media requests?
already tried:
window.screen.innerwidth

Like #yousoumar said instead of using setInterval to get the user's screen width, use resize event to get the screen width whenever the screen resolution changes.
window.screen.width get only the user's screen width and it doesn't change according to the manual resizing of the browser
Instead window.innerWidth gets the browser width and it changes according to the manual resizing of the browser
function widthResizer(){
var width = window.innerWidth
console.log(width)
}
// Getting the width of the browser on load
widthResizer()
// Getting the width of the browser whenever the screen resolution changes.
window.addEventListener('resize', widthResizer)

Instead of setting up a setIntervall to track screen width changes, use the built in resize event.
As #Kumara pointed it, you would wanna use window.innerWidth, instead of window.screen.width, as the last one give the screen's original size, not the resized one.
function xxx(){
var x = window.innerWidth
console.log(x)
}
// that gives you the width on load
xxx();
// that is for when you change the width manually
window.addEventListener('resize', xxx);

Why "screen.height" works fine when using Chrome' DevTool to simulate mobile devices, but not on real mobile devices?

The screen.height I am talking about is described in https://www.w3schools.com/jsref/prop_screen_height.asp
I used screen.height < 560 ? true : false to determine whether the screen height is smaller than a threshold, so I can hide some UI elements in this case.
It works fine in Chrome's simulator for mobile devices (the feature highlighted below).
By "works fine", I mean when simulating a mobile device, like setting device to be iPhone X as shown above and displaying in landscape mode, the UI elements are hidden correctly due to screen.height < 560 = true.
However, on real mobile devices like a real iPhone X, the UI elements don't get hidden, which I guess is because that it is always screen.height < 560 = false, even if it is in landscape mode.
I am wondering why is that... Why iPhone X in DevTool has a different height from a real iPhone X?
Is the simulation in Chrome DevTool not accurate? Or is it because screen.height doesn't return the correct value on mobile device?
Any hints would be appreciated!

That's because the simulator takes the screen size according to the dimensions that you are setting there. But in reality, screen.height takes the height size of the whole screen, including elements that are outside of the viewport in the device. You should use window.innerHeight to get an accurate height size.
If you log in your console screen.height and window.innerHeight on the simulator, you will get the same size. If you do this in the normal viewport (deactivating the simulator), you will get different values.
More info: Screen Height - Window InnerHeight
UPDATE
screen.height doesn't update on screen rotation, always has the same value corresponding to the screen height in portrait mode, while window.innerHeight takes the current height of the device window either portrait or landscape. Just make sure to fire this in the event when the rotation happens.
For this, you could use the Window.matchMedia() like so:
// Breakpoints
const breakpoint = window.matchMedia('(max-height: 560px)');
// Breakpoint checker
const breakpointMutations = () => {
if (breakpoint.matches === true) {
// Do something
}
}
// Run breakpoint checker if media changes
breakpoint.onchange = function (event) {
breakpointMutations();
}
// Run breakpoint checker on load
breakpointMutations();

It might be because you are missing the response meta tag. Try adding this to your head tag:
<meta name="viewport" content="width=device-width, initial-scale=1">

Finding the size of screen using JS on a 4k monitor

I'm working on a photo carousel. The intent is to display x pictures on one row where x is dependent on the viewport size. By viewport I mean the area inside the browser's window less scroll bars. The photos are re-sized to a width of 200 If the viewport width is 2000 I can get 10 photos (200*10=2000) (I kept the arithmetic easy)
My screen resolution is 3840x2160. I expanded the browser to take up the entire screen. When I use: $(window).width() i come up with 1707 and with screen.width I come up with 1707. Definitely not 3840.
When I resize the browser so that it's taking up about half the screen I get:
$(window).width() of 929 and with screen.width 1706.
For browsers I'm using Edge, IE11, FF and Chrome 46 and I get roughly the same problem.
My desktop monitor is also 4k and from what I've read it consists of two panels of 1920x1080 for a total of 3840x2160. If that's true, on my laptop 4k monitor I should be getting a width of 1920 using screen.width, if I take up the entire screen but I'm not.
I need to take into account that most folks viewing this website will not have 4k monitors.
Any ideas on how I can get the screen width on a 4k monitor?

Perhaps you can make use of the window.devicePixelRatio property.
It should give you 1, 2, etc. Multiply window.innerWidth and window.innerHeight by this value.
var width = window.innerWidth * window.devicePixelRatio;
var height = window.innerHeight * window.devicePixelRatio;
On my Dell laptop with a 4K UHD screen (3840 * 2160) display resolution, with Windows display settings configured to have a 250% scale and layout, I get the following results:
MDN documentation: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

To get the windows' dimensions :
var width = window.innerWidth;
var height = window.innerHeight;
To get the screen's dimensions :
var width = screen.width;
var height = screen.height;

Javascript should report me for my 4K monitor the screen resolution 3840 x 2160. In fact, I get:
screen.width=2560
screen.height=1440
document.querySelector('html').clientWidth=2526
window.innerWidth=2526
window.outerWidth=2575
document.querySelector('html').clientHeight=1301
window.innerHeight=1301
window.outerHeight=1415
screen.availWidth=2560
screen.availHeight=1400
40 pixels is the Windows 10 Taskbar at the bottom of the desktop.

JavaScript algorithm to determine orientation of tablet

We're building an HTML5/JavaScript app developed for tablets, and we want to lay out my screens differently in landscape versus portrait.
Originally, we were capturing orientation change notifications, and keeping track of the current orientation (generally reported as 0, 90, -90 or 180 degrees -- see this question). Unfortunately, different devices report different orientations as "0". That link argues that it's a bug, but there's some evidence that this is working-as-designed -- for example, this article suggests that "landscape" is the default orientation and those devices report an orientation of "0" when held in landscape mode.
We next tried to just look at the actual screen size, assuming that when width was greater than height, we were in landscape mode. But this algorithm gets confused when the on-screen keyboard is displayed -- when the keyboard is displayed, the dimensions of the visible area are returned. When the device is, strictly speaking, in portrait mode, but the portion of the screen not obscured by the keyboard is wider than it is tall.
The response to this question is quite old. Is that still the best answer? Does anyone have a good algorithm that takes the keyboard visibility into consideration?

http://jsfiddle.net/jjc39/
Try this:
<span id="orientation">orientation</span>​
$(document).ready(checkOrientation);
$(window).resize(checkOrientation);
function checkOrientation() {
var orientation = "Portrait";
var screenWidth = $(window).width();
var screenHeight = $(window).height();
if (screenWidth > screenHeight) {
orientation = "Landscape";
}
$("#orientation").html(orientation);
}​

jQuery/JS, iOS 4 and $(document).height() problems

I've run into an odd issue with what appears to be various versions of Webkit browsers. I'm trying to position an element on the center of the screen and to do the calculations, I need to get various dimensions, specifically the height of the body and the height of the screen. In jQuery I've been using:
var bodyHeight = $('body').height();
var screenHeight = $(window).height();
My page is typically much taller than the actual viewport, so when I 'alert' those variables, bodyHeight should end up being large, while screenHeight should remain constant (height of the browser viewport).
This is true in
- Firefox
- Chrome 15 (whoa! When did Chrome get to version 15?)
- Safari on iOS5
This is NOT working in:
- Safari on iOS4
- Safari 5.0.4
On the latter two, $(window).height(); always returns the same value as $('body').height()
Thinking it was perhaps a jQuery issue, I swapped out the window height for window.outerHeight but that, too, does the same thing, making me think this is actually some sort of webkit problem.
Has anyone ran into this and know of a way around this issue?
To complicate things, I can't seem to replicate this in isolation. For instance: http://jsbin.com/omogap/3 works fine.
I've determined it's not a CSS issue, so perhaps there's other JS wreaking havoc on this particular browser I need to find.

I've been fighting with this for a very long time (because of bug of my plugin) and I've found the way how to get proper height of window in Mobile Safari.
It works correctly no matter what zoom level is without subtracting height of screen with predefined height of status bars (which might change in future). And it works with iOS6 fullscreen mode.
Some tests (on iPhone with screen size 320x480, in landscape mode):
// Returns height of the screen including all toolbars
// Requires detection of orientation. (320px for our test)
window.orientation === 0 ? screen.height : screen.width
// Returns height of the visible area
// It decreases if you zoom in
window.innerHeight
// Returns height of screen minus all toolbars
// The problem is that it always subtracts it with height of the browser bar, no matter if it present or not
// In fullscreen mode it always returns 320px.
// Doesn't change when zoom level is changed.
document.documentElement.clientHeight
Here is how height is detected:
var getIOSWindowHeight = function() {
// Get zoom level of mobile Safari
// Note, that such zoom detection might not work correctly in other browsers
// We use width, instead of height, because there are no vertical toolbars :)
var zoomLevel = document.documentElement.clientWidth / window.innerWidth;
// window.innerHeight returns height of the visible area.
// We multiply it by zoom and get out real height.
return window.innerHeight * zoomLevel;
};
// You can also get height of the toolbars that are currently displayed
var getHeightOfIOSToolbars = function() {
var tH = (window.orientation === 0 ? screen.height : screen.width) - getIOSWindowHeight();
return tH > 1 ? tH : 0;
};
Such technique has only one con: it's not pixel perfect when page is zoomed in (because window.innerHeight always returns rounded value). It also returns incorrect value when you zoom in near top bar.
One year passed since you asked this question, but anyway hope this helps! :)

I had a similar problem. It had to do with 2 thing:
Box-sizing CSS3 property:
In the .height() jQuery documentation I found this:
Note that .height() will always return the content height, regardless of the value of the CSS box-sizing property. As of jQuery 1.8, this may require retrieving the CSS height plus box-sizing property and then subtracting any potential border and padding on each element when the element has box-sizing: border-box. To avoid this penalty, use .css( "height" ) rather than .height().
This may apply to $('body').height().
Document ready vs Window.load
$(document).ready() is run when the DOM is ready for JS but it's possible that images haven't finished loading yet. Using $(window).load() fixed my problem. Read more.
I hope this helps.

It is 2015, we are at iOS 8 now. iOS 9 is already around the corner. And the issue is still with us. Sigh.
I have implemented a cross-browser solution for the window size in jQuery.documentSize. It stays clear of any kind of browser sniffing and has been heavily unit-tested. Here's how it works:
Call $.windowHeight() for the height of the visual viewport. That is the height of the area you actually see in the viewport at the current zoom level, in CSS pixels.
Call $.windowHeight( { viewport: "layout" } ) for the height of the layout viewport. That is the height which the visible area would have at 1:1 zoom - the "original window height".
Just pick the appropriate viewport for your task, and you are done.
Behind the scenes, the calculation roughly follows the procedure outlined in the answer by #DmitrySemenov. I have written about the steps involved elsewhere on SO. Check it out if you are interested, or have a look at the source code.

Try this :
var screenHeight = (typeof window.outerHeight != 'undefined')?Math.max(window.outerHeight, $(window).height()):$(window).height()

A cross browser solution is set that by jQuery
Use this property:
$(window).height()
This return a int value that represents the size of visible screen height of browser in pixels.