Why doesn't a 4K TV give 4K resolution?

I have designed the front page for a website that contains a lot of information. I have fixed the size of the page to 3530x2070 which should easily fit on a 4K screen with a resolution of 3840x2160.

<div id="mainDiv" style="width:3530px;height:2070px;border:1px black solid;">

However, when I connect to a 4K TV (not a monitor) I only see about 2700 pixels of width - and that's using the 4096x2160 screen resolution - the 3840x2160 is even narrower.

<div id="mainDiv" style="width:2700px;height:1070px;border:1px black solid;">

I've tried both Sony and Samsung TV models.

Note too that the TVs each detected the proper resolution, i.e. when I set the computer resolution for the TV to 3840 the TV says it's at 3840 and when I set the computer to 4096 the TV also shows it is set to 4096.

This means the computer and the TV agree on the resolution but the browser is not showing the full width of the webpage.

One more piece of the puzzle, on my 1920x1080 computer monitor the webpage sizing works as I expect (when I size it down to match that resolution). I lose a few pixels for borders and the browser frame and what not but that's to be expected. Losing more than 1000 pixels on the width is not what I expect.

<div id="mainDiv" style="width:1900px;height:1065px;border:1px black solid;">

I'm running off of the mini display port through an HDMI cable and as I said, both devices agree on the resolution of that connection.

DPI scaling appears to be the culprit.

• Newer versions of Windows (since 8.1) automatically scale DPI for each display to adapt to displays with very high pixel density. It appears that Windows has scaled the 4K TV to 150% of normal (150% of 2700 is 4050, which is very close to 4096).

• Recent versions of Firefox and Chrome detect the system DPI scaling setting and adapt accordingly. You can disable this with certain advanced settings:

  • In Firefox, this is controlled by the layout.css.devPixelsPerPx configuration value, which can be edited in about:config. -1.0 is the default, where the browser will match the system's DPI scaling value on the primary monitor. To force Firefox to not scale DPI, set this value to 1.0. Setting this to any other positive value instructs the browser to scale by that much (the default on your system appears to be 1.5).

  • In Chrome, this is controlled by the DWORD registry value high-dpi-support in key HKCU\Software\Google\Chrome\Profile. Set to 0 to disable scaling, 1 to enable scaling, or 2 to use the default.