Device-width and screen.width & window.innerWidth

Question

What the device-width CSS3 property refers to? Is it screen.width or rather window.innerWidth?

http://www.quirksmode.org/mobile/viewports.html – Lalji Tadhani Aug 30 '16 at 13:15 — Lalji Tadhani, Aug 30 '16 at 13:15

score 0 · Answer 1 · answered Aug 30 '16 at 13:15

0

window.innerWidth

exactly, which work only for device

answered Aug 30 '16 at 13:15

lalala

score 0 · Answer 2 · edited May 23 '17 at 11:51

0

According to MDN

Describes the width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

max-device-width is the width of the device's entire rendering area, i.e. the actual device screen

Therefore it's screen.width.

edited May 23 '17 at 11:51

Community

answered Aug 30 '16 at 13:26

Nhan

So `screen.width` is always the same (constant) for concrete mobile device? – Mulligun81 Aug 30 '16 at 13:36
@Mulligun81 No! The user can rotate the device so that the width becomes the height. – Mr Lister Aug 30 '16 at 13:46
Ok i understand. Can You explain me then why does setting `height=device-height` viewport property doesn't work - `window.innerHeight` always reports the same vale while setting `width=device-width` is reflected by `window.innerWidth`? – Mulligun81 Aug 30 '16 at 14:01
@Nhan Can You answer my question? – Mulligun81 Aug 30 '16 at 14:47
Sorry @Mulligun81, I'm afraid I can't, I'm not sure about this. – Nhan Sep 01 '16 at 16:31

2 Answers2