17

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.

Zen-Lee Chai
  • 431
  • 1
  • 4
  • 10
  • 2
    "I want to do this in pure JavaScript to get started." — Don't do that. [Use CSS](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries) instead. – Quentin Jul 01 '15 at 13:22
  • My question - `How to detect screen size for responsive web design?` - Can I use media queries to get this value? – Zen-Lee Chai Jul 01 '15 at 13:28
  • — Why would I recommend that you use them if you couldn't? – Quentin Jul 01 '15 at 13:28
  • RWD is done with mediaqueries in 90% of webprojects. It gets quite messy, quite fast, when trying to do a responsive design with pure javascript. At least use an framework like bootstrap or similar if you want to do it purely with javascript. – mondjunge Jul 01 '15 at 13:32
  • 1
    I will likely use media queries, but I want to log the x and y dimensions of each users screen when they first login. This is what I meant by getting started with JS. This way I can characterize what screens I'm working with before writing the CSS media queries. – Zen-Lee Chai Jul 03 '15 at 22:56

4 Answers4

52

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);
l0w_skilled
  • 822
  • 5
  • 8
8

screen.width is the property your are looking for.

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
Karthik Sagar
  • 424
  • 4
  • 7
0

Well, screen.width & screen.height will detect the width and height of the screen and not necessarily the users browser width/height. So this may not provide an accurate reading if the user resizes the browser. https://developer.mozilla.org/en-US/docs/Web/API/Screen/width

Another way would be to use window.innerWidth and window.innerHeight. Regardless of the device/screen, this would provide the actual browser width/height. https://developer.mozilla.org/en-US/docs/Web/API/Window/innerWidth

A bit of testing would determine which one would be most suitable for your requirements.

You may also want to read about Layout Viewport https://developer.mozilla.org/en-US/docs/Glossary/Layout_viewport

Sambuxc
  • 425
  • 2
  • 11
  • 26