For websites being displayed on Chrome in Windows 10 v1909, does the website's viewport width always vary based upon the value of Windows 10's Scaling and Layout setting (found in Settings>Display>Scaling and Layout) when the viewport meta tag's width value is set to device-width?
I just bought a new 3840 x 2160 4K Ultra High Definition (UHD) monitor thinking that the websites I design would be displayed at 3840 pixels wide. But when I inspected header elements using Chrome's Developer Tools, the width of the viewport gets smaller as I scale Windows 10 higher. And because I can't read the text for anything displayed on this 4K UHD monitor at 3840 pixels wide (which happens when Windows 10 scaling is set to 100%), I have increased Windows 10 scaling to 175% so that I can read the text comfortably. But when I increase the Windows 10 scaling, the viewport width of my browser shrinks in size (e.g., at 175% Windows 10 scaling the width of my browser viewport is 2195 pixels). I did some experimentation and here are the widths of the browser viewport that are associated with specific Windows 10 scaling values:
- 100% scaling ... 3840 viewport width
- 125% scaling ... 3072 viewport width
- 150% scaling ... 2560 viewport width
- 175% scaling ... 2195 viewport width
- 200% scaling ... 1920 viewport width
The reason I posted this question is so that I can understand what size I need to make my images when desiging for 4K websites. I use the Avada WordPress theme to design all of my client websites. Their advice for desiging 4K websites is:
"As a general rule, we currently use images that are 2000px wide for our demos which is usually big enough to make images look great on all common screen sizes."
Looking at the table of Windows 10 scaling and browser viewport values listed above, it appears that Avada's image width advice applies to 4K UHD monitors ONLY when Windows 10 is scaled at 175% or higher (with a slight upsampling of the image occurring at 175% scaling). Since scaling Windows 10 on a 4K UHD monitor at 150% is "iffy" in terms of being able to comfortably read text, and any scaling less than 150% is basically unreadable, it appears that a general rule of thumb for image width on 4K UHD monitors is 2600 pixels. This image width would cover Windows 10 scaling at 150% and higher.
For Windows scaling less than 150%, a 2600 pixel image would be upsampled to fill the width of the viewport. However, it seems to me that most people will scale Windows 10 on a 4K UHD monitor to at least 150% in order for text to be readable (this is the BIG assumption that I believe drives how wide my images should be). Since the viewport width associated with Windows 10 scaling of 150% is 2560 pixels, images that are created at 2600 pixels wide would fill the browser viewport without upsampling (and possible loss of quality).
Am I understanding the relationship between Windows 10 scaling and browser viewport width correctly? Is my conclusion about sizing all images for 4K website design at 2600 pixels width correct?