How to detect screen size for responsive web design?

问题

I googled this and got a quirksmode site that gives you your screen size. Pulling up the console I see that screen.width and screen.height are directly available from the window object.

I want to do the detection in pure JavaScript to get started. Can I use this property across all devices and browsers - mobile, tablet, PC and Chrome, Safari, IE, Firefox.

I don't care about the view port changing due to re-sizing etc. Just the actual size of the screen which does not change.

I was hoping there was a single property I could check across devices and browsers.

Here is some general info by wikipedia on responsive web design.

回答1:

screen.width is the property your are looking for.

回答2:

Take a look at Get the device width in javascript

Media Queries work in js too:

if (window.matchMedia('screen and (max-width: 768px)').matches) {}

Another way would be:

var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);

回答3:

This is what worked for me after long hunch. These attributes below provide responsive sizes based on new tab size.

window.innerWidth
window.innerHeight

来源：https://stackoverflow.com/questions/31162606/how-to-detect-screen-size-for-responsive-web-design