Repository: godot
Issue: Display DPI scaling (Microsoft Windows Setting) leads to incorrect canvas size in web export with ALL Canvas Resize Policy
Labels: bug,platform:web,topic:porting

### Tested versions

- Reproductible in: 4.2.2.stable.official [15073afe3]

### System information

Godot v4.2.2.stable - Windows 10.0.22621 (Windows 11) - Vulkan (Forward+) - dedicated NVIDIA GeForce RTX 4070 (NVIDIA; 32.0.15.5585) - Intel(R) Core(TM) i7-9700K CPU @ 3.60GHz (8 Threads)

### Issue description

When using Web export, Windows DPI Scaling screws up the canvas in all case, unless I specifically mess with index.js to disable the relevant functions.
This is for embedding on itch.io specifically with an iframe, but from my testing, the issues are present even when not embedding.

For the current case, my project has a viewport width and height set to **960x540** in the Project Settings.
In Windows Display Settings, in the "Scale and layout" section, my monitor is set to **125% scaling** (this is a DPI setting).

I have an html page with an **iframe of size 960x540** (same as my project). This is on itch.io, by settings the Viewport Dimensions on the project's settings page, but the issues are the same if you create an html page with a iframe yourself.

Here's what's going wrong with each possible Canvas Resize Policy export settings : 

- **Policy : Adaptive** :

The javascript in the exported index.html page sets the canvas' width/height to 1200x625px, which is the game's resolution x1.25, fitting my DPI scaling.<sup>**1**</sup>

Then, in the iframe, the iframe viewport is only 960x540px, so it scales down that canvas so that it fits inside.
Then, the browser apply my 125% DPI settings, so the canvas gets scaled up AGAIN internally.

This result in terrible artifacting from scaling up and down multiple times.

( <sup>**1**</sup> Also, I'm not sure why the .js is effectively applying a 1.25x zoom to my canvas as the browser already does that. So even if the game wasn't embedded, the total scaling would be too high)

- **Policy : Project** :

The exported index.html sets the canvas to 960x540px correctly, fitting the game. But then, the index.js adds inline CSS to the canvas to scale it DOWN to 768x432px because of the detected 1.25x scaling.
This actually makes the game run at the correct resolution (960x540) internally, because the browser applies the 1.25x DPI zoom and bring it back to 960x540.

But in the iframe, the viewport is 960x540px **before** scaling, so the 768x432px canvas doesn't fit the viewport and 25% is left empty, like so : 

![itch io viewport](https://github.com/godotengine/godot/assets/9079110/19fe93bd-8b6b-48fc-9ddc-ea92cdf97e2a)

(PS. This isn't really related to Godot, but note that itch.io doesn't allow to set different viewport sizes depending on DPI, so if I set the viewport size to 768x432px, it'll fix the issue but the game will ONLY work correctly on monitors with 125% scaling)


- **Policy : None** : 

With this one, the canvas is just to a default 300x150px size and no scaling occurs. I believe this is intended, so no issue here, but it doesn't help fixing the problem either.



- **Expected behavior** :

I think there should be an additional policy export settings to be able to ignore DPI, as it's required for iframe integration, and it's surprising that no setting allow to keep the original resolution with no change. 

I believe itch.io is probably the number one target for Godot users when using Godot Web export, so it would make sense to be able to have it work correctly on itch.io without having to mess with the index.js code.

Also, "Adaptive" might be bugged altogether ? (The game ends up scaled 1.25x TWICE, this doesn't seem intended?)

### Steps to reproduce

- Set current monitor's Scaling to 125% in Microsoft Windows Display Settings.
- In Godot, create a new project, edit project settings : Viewport width/height to 960 x 540, stretch mode to "canvas_item".
- Create a new scene, add a TextureRect node with icon.svg texture.
- Export project to Web, settings Canvas Resize Policy to "Adaptive".
- (external) Create an .html file with an iframe of size 960x540px, fitting the project. Make the iframe open the html file from your export.
- Run the iframe in a browser. You'll notice the icon in the scene is a bit blurry. If you inspect the content of the iframe, you'll see the canvas is set to 1200x675px, then scaled down to fit the iframe.
- Export project to Web again, with the Canvas Resize Policy set to "Project".
- Run the iframe again. You'll notice the icon is rendering better, but 25% of the iframe width and height is empty, and the canvas is set to 768x432px.

PS. For step 6, if the game is pixel art, the scaling issue looks a lot worse than the icon in this example.

### Minimal reproduction project (MRP)

[Canvas Test Project.zip](https://github.com/user-attachments/files/15811786/Canvas.Test.Project.zip)

### Edit : 

Forgot to mention my "fix". In the exported files, with policy set to "Project", if I edit the main .js file and replace both occurences of 
```
 const scale = GodotDisplayScreen.getPixelRatio();
```
to
```
 const scale = 1;
```
I then get the expected behavior : The canvas width/height is 960x540 and no CSS is applied to make it smaller, so everything works for my iframe.

Edit 2 : Just noticed the above fix break functionality of the fullscreen button.