How to determine screen size for responsive web designs?
I googled this and got the quirksmode site which gives you the screen size. screen.width
console, I can see that screen.width
and screen.height
are accessible directly from the window object.
I want to do detection in pure JavaScript to get started. Can I use this property for all devices and browsers - mobile, tablet, PC and Chrome, Safari, IE, Firefox.
I don't care about changing the viewport due to oversizing, etc. Just the actual screen size that doesn't change.
I was hoping there is one property that I can check across devices and browsers.
Below is some general wikipedia information on responsive web design.
screen.width
is the property you are looking for.
Take a look at Get device width in javascript
Media queries also work in js:
if (window.matchMedia('screen and (max-width: 768px)').matches) {}
Another way:
var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
This is what worked for me after a lot of guesswork. These attributes below provide flexible sizes based on the new tab size.
window.innerWidth
window.innerHeight