Clever Geek Handbook

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.

+5


source to share


3 answers


screen.width

is the property you are looking for.



+4


source


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);
+19


source


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
0


source






More articles:


All Articles