For a "browser fingerprint" project at university I want to measure dimensions of different html-elements to get a fingerprint due to different rendering engines and configurations of the browsers and therefore slighty differences in their width and height.
Now I was wondering why the same html-element has different dimensions only due to different displays.
Let me give you an example:
The html-element
<textarea> </textarea>
has in Edge (version 133) a default size of 175px x 34px (without border, padding, or margin).
But when I print this element on an other screen with DPI-Scaling active the element has slightly other dimensions (regardless of screen resolution), seen in the table below:
| DPI-Scaling Factor | Width (in px) | Hight (in px) |
|---|---|---|
| 1 | 175 | 34 |
| 1,5 | 175,3333 | 32 |
| 2 | 169 | 33 |
| 2,5 | 169,2 | 32,8 |
| 3 | 169 | 33,3333 |