Menu
You can get the device screen width via the screen. width property. Sometimes it's also useful to use window. innerWidth (not typically found on mobile devices) instead of screen width when dealing with desktop browsers where the window size is often less than the device screen size.
Use window. innerWidth and window. innerHeight to get the current screen size of a page.
The size of a 16:9 screen depends on how long the screen's diagonal is, as 16:9 is merely the ratio of the screens width to its height. If you have the screens diagonal, you can multiply that measurement by 0.872 to get the screen's width. You can also multiply the diagonal by 0.49 to get the screen's height.
You can get the device screen width via the screen.width property.
Sometimes it's also useful to use window.innerWidth (not typically found on mobile devices) instead of screen width when dealing with desktop browsers where the window size is often less than the device screen size.
Typically, when dealing with mobile devices AND desktop browsers I use the following:
var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
One issue with Bryan Rieger's useful answer is that on high-density displays, Apple devices report screen.width in dips, while Android devices report it in physical pixels. (See http://www.quirksmode.org/blog/archives/2012/07/more_about_devi.html .) I suggest using if (window.matchMedia('(max-device-width: 960px)').matches) {} on browsers supporting matchMedia.
I just had this idea, so maybe it's shortsighted, but it seems to work well and might be the most consistent between your CSS and JS.
In your CSS you set the max-width value for html based on the @media screen value:
@media screen and (max-width: 480px) and (orientation: portrait){
html {
max-width: 480px;
}
... more styles for max-width 480px screens go here
}
Then, using JS (probably via a framework like JQuery), you would just check the max-width value of the html tag:
maxwidth = $('html').css('max-width');
Now you can use this value to make conditional changes:
If (maxwidth == '480px') { do something }
If putting the max-width value on the html tag seems scary, then maybe you can put on a different tag, one that is only used for this purpose. For my purpose the html tag works fine and doesn't affect my markup.
Useful if you are using Sass, etc: To return a more abstract value, such as breakpoint name, instead of px value you can do something like:
<div id="breakpoint-indicator" />
$('#breakpoint-indicator').css('content');), which returns "large", or "mobile", etc depending on what the content property is set to by the media query.Now you can act on same breakpoint names as you do in sass, e.g. sass: @include respond-to(xs), and js if ($breakpoint = "xs) {}.
What I especially like about this is that I can define my breakpoint names all in css and in one place (likely a variables scss document) and my js can act on them independently.
You should use
document.documentElement.clientWidth
It is regarded as cross-browser compability, and is the same method that jQuery(window).width(); uses.
For detailed information have a look at: https://ryanve.com/lab/dimensions/
check it
const mq = window.matchMedia( "(min-width: 500px)" );
if (mq.matches) {
// window width is at least 500px
} else {
// window width is less than 500px
}
https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia
var width = Math.max(window.screen.width, window.innerWidth);
This should handle most scenarios.
You can easily use
document.documentElement.clientWidth
Update
For example:
let el = document.getElementById('result');
el.innerText = document.documentElement.clientWidth;
window.addEventListener('resize', function(event) {
// do what you want
el.innerText = document.documentElement.clientWidth;
}, true);<!DOCTYPE html>
<html>
<body>
<div id="result"></div>
</body>
</html>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With