My computer's resolution is: 1920 x 1080. In javascript I set a var screenWidth = window.screen.width; The browser is all the way open. The result I get from window.screen.width is 1412. I'm trying to set the @media max-width for this device. On the web I'm seeing a standard max-width of 1920 everywhere. My computer is 1920 but I'm seeing 1412. This doesn't make any sense. I just can't take advice from google searches. Nothing makes any sense at all. For the purpose of setting @media max-width values how do I determine what a 'max-width' for a given device is?
The 1920 x 1080 resolution is the maximum your display can show, but the actual width reported by the browser (1412 in your case) accounts for factors like browser Chrome, toolbars, or any additional UI elements. To set your @media max-width, you should use the width you get from window.innerWidth or window.screen.width in those specific contexts, as they reflect the viewport size rather than the screen resolution.
Thanks but I don't think so. That's over 500 pixels. The browser was all the way open. That's OK. If the width is over 1200 I'm considering that max. As you pointed out, I'm using window.screen.width. More specifically, to qualify the device media I'm using window.matchMedia. I created a table of widths for elements having a specific font, weight and number of characters. I use that to determine actual element width, given a maximum number of characters in element validation. That was based on this: https://codepen.io/SLSCoder/pen/WNqLyJY Thanks for your response.