Responsive testing. Need help understanding browser dimensions compared to screen dimensions
Im helping with developing a new website and don't understand the dimensions shown in the responsive design mode.
For instance my screen is 1920px wide but in the responsive mode it goes up to around 1540 only.
When I change device to Galaxy S5 it changes to 360x640 but I know that the S5 screen is 1080x1920.
Need help in understanding this difference. Thanks
Chosen solution
Firefox uses different scaling factors on different systems. For example, on Windows 7, it's very common to have a Text Size of 125% at the system level. Within Firefox, then, the base level of zoom is 125%.
You can see the consequences on this page:
http://dev.jeffersonscher.com/resolution.html
With those default settings, I get:
JavaScript screen.width x screen.height = 1536 x 960
window.devicePixelRatio = 1.25 device pixels per CSS pixel
True screen.width x screen.height = 1920 x 1200
Note: the third line is computed based on the values ascertained for the first two lines and is subject to rounding errors at different zoom levels.
So maxing out at around 1540 pixels makes sense because that's how many "CSS pixels" the page has to work with that Firefox will enlarge to use the available screen space.
In Firefox for Android, the base level of zoom is 400%, so yes, that yields are pretty low resolution in CSS pixels.
Firefox exposes this factor in about:config as layout.css.devPixelsPerPx -- note that -1 is a special value that means to use the system text size/dpi factor. Otherwise, you would not want to use a value lower than 1.
Ler a resposta no contexto 👍 0All Replies (2)
Chosen Solution
Firefox uses different scaling factors on different systems. For example, on Windows 7, it's very common to have a Text Size of 125% at the system level. Within Firefox, then, the base level of zoom is 125%.
You can see the consequences on this page:
http://dev.jeffersonscher.com/resolution.html
With those default settings, I get:
JavaScript screen.width x screen.height = 1536 x 960
window.devicePixelRatio = 1.25 device pixels per CSS pixel
True screen.width x screen.height = 1920 x 1200
Note: the third line is computed based on the values ascertained for the first two lines and is subject to rounding errors at different zoom levels.
So maxing out at around 1540 pixels makes sense because that's how many "CSS pixels" the page has to work with that Firefox will enlarge to use the available screen space.
In Firefox for Android, the base level of zoom is 400%, so yes, that yields are pretty low resolution in CSS pixels.
Firefox exposes this factor in about:config as layout.css.devPixelsPerPx -- note that -1 is a special value that means to use the system text size/dpi factor. Otherwise, you would not want to use a value lower than 1.
Thanks a lot, thats super useful information. I was going crazy not understanding how the mobile was changing the thresholds. With your link I can see for my phone the pixel ratio is 3. I also remembered where that system setting is at least in windows and it was indeed at 125% which came as default for my PC. ... ... No I just need to find out why is it that after changing it back to 125% is everything so big! rrrrrrh Windows!