DevicePixelRatio appears to be suddenly stacking with windows scale
up vote
0
down vote
favorite
I have recently added DPI scaling to a project to ensure the UI elements in the project (drawn with canvas) are a reasonably consistent size across devices. This seemed to work at first, but a day after adding the code, I am suddenly getting massive UI elements on my 4k laptop. My high DPI mobile device and normal DPI desktop monitor display at the intended size. What puzzles me is that on the night I implemented window.devicePixelRatio, the value that was being output was "1". But now today, the value is "2.5" and I havent changed any settings.
The machine is running Windows and is set to %250 scale by default and has been since I got the laptop, if I set it to %100, the DPI output returns to "1". This isn't very helpful as everything is then tiny, including the UI Element. All of this also applies to changing the page zoom.
The problem ultimately seems to be that scales are being applied twice, so for a desired scalar of n, I get n^2 instead. I suspect the problem lies below the browser level because all browsers on this machine (Chrome, Opera, Edge, IE) display the same over inflated UI elements.
I need to figure out how to to get my computer back to the state where the master display setting is set to %250 but window.devicePixelRatio returns a value of "1". I would also really like to know why this changed in the first place so I can avoid it in the future.
html browser scale devicepixelratio
edited Nov 15 at 1:34
Josh Lee
117k23210241
asked Nov 12 at 7:32
Thomas Bouffard
62
add a comment |
up vote
0
down vote
favorite
I have recently added DPI scaling to a project to ensure the UI elements in the project (drawn with canvas) are a reasonably consistent size across devices. This seemed to work at first, but a day after adding the code, I am suddenly getting massive UI elements on my 4k laptop. My high DPI mobile device and normal DPI desktop monitor display at the intended size. What puzzles me is that on the night I implemented window.devicePixelRatio, the value that was being output was "1". But now today, the value is "2.5" and I havent changed any settings.
The machine is running Windows and is set to %250 scale by default and has been since I got the laptop, if I set it to %100, the DPI output returns to "1". This isn't very helpful as everything is then tiny, including the UI Element. All of this also applies to changing the page zoom.
The problem ultimately seems to be that scales are being applied twice, so for a desired scalar of n, I get n^2 instead. I suspect the problem lies below the browser level because all browsers on this machine (Chrome, Opera, Edge, IE) display the same over inflated UI elements.
I need to figure out how to to get my computer back to the state where the master display setting is set to %250 but window.devicePixelRatio returns a value of "1". I would also really like to know why this changed in the first place so I can avoid it in the future.
html browser scale devicepixelratio
edited Nov 15 at 1:34
Josh Lee
117k23210241
asked Nov 12 at 7:32
Thomas Bouffard
62
devicePixelRatio is not the pixel-density ratio of your monitor, it is the one between CSS pixels and physical pixels. OS and browser zoom levels will indeed impact this value. As to your issue, we would need to see how you do use this value in order to be able to help you more.
– Kaiido
Nov 12 at 7:37
This value is just used as a scalar, it's multiplied with the length properties of the UI elements. So if the pixel is half the standard size, the intent is that this scalar draws all 10px rectangles as 20px wide instead. If that isn't the right value for what I want, I would be happy for a suggested alternative, but it also leaves me confused as to why it ever worked at all.
– Thomas Bouffard
Nov 12 at 8:26
yes that is the one value we have access to, but be careful it includes the zoom levels so you will want to at least round it. May interest you:stackoverflow.com/questions/53062962/…
– Kaiido
Nov 12 at 8:32
Thanks for the link! I'm going to re-read it again when I'm more awake but I do have a few points to make until then. I am not using fullscreen and am not really worried about crisp rendering in the ui, the game itself dynamically fits the window and the viewport scales to best fit the underlying scene rectangle, it makes no assumption about window size or aspect ratio on load, this is part of what makes sizing the UI so difficult as it can't use the canvas dimensions, its size needs to tie to the real world regardless of the size relative to the scene that results.
– Thomas Bouffard
Nov 12 at 9:37
add a comment |
up vote
0
down vote
favorite
up vote
0
down vote
favorite
I have recently added DPI scaling to a project to ensure the UI elements in the project (drawn with canvas) are a reasonably consistent size across devices. This seemed to work at first, but a day after adding the code, I am suddenly getting massive UI elements on my 4k laptop. My high DPI mobile device and normal DPI desktop monitor display at the intended size. What puzzles me is that on the night I implemented window.devicePixelRatio, the value that was being output was "1". But now today, the value is "2.5" and I havent changed any settings.
The machine is running Windows and is set to %250 scale by default and has been since I got the laptop, if I set it to %100, the DPI output returns to "1". This isn't very helpful as everything is then tiny, including the UI Element. All of this also applies to changing the page zoom.
The problem ultimately seems to be that scales are being applied twice, so for a desired scalar of n, I get n^2 instead. I suspect the problem lies below the browser level because all browsers on this machine (Chrome, Opera, Edge, IE) display the same over inflated UI elements.
I need to figure out how to to get my computer back to the state where the master display setting is set to %250 but window.devicePixelRatio returns a value of "1". I would also really like to know why this changed in the first place so I can avoid it in the future.
html browser scale devicepixelratio
edited Nov 15 at 1:34
Josh Lee
117k23210241
asked Nov 12 at 7:32
Thomas Bouffard
62
I have recently added DPI scaling to a project to ensure the UI elements in the project (drawn with canvas) are a reasonably consistent size across devices. This seemed to work at first, but a day after adding the code, I am suddenly getting massive UI elements on my 4k laptop. My high DPI mobile device and normal DPI desktop monitor display at the intended size. What puzzles me is that on the night I implemented window.devicePixelRatio, the value that was being output was "1". But now today, the value is "2.5" and I havent changed any settings.
The machine is running Windows and is set to %250 scale by default and has been since I got the laptop, if I set it to %100, the DPI output returns to "1". This isn't very helpful as everything is then tiny, including the UI Element. All of this also applies to changing the page zoom.
The problem ultimately seems to be that scales are being applied twice, so for a desired scalar of n, I get n^2 instead. I suspect the problem lies below the browser level because all browsers on this machine (Chrome, Opera, Edge, IE) display the same over inflated UI elements.
I need to figure out how to to get my computer back to the state where the master display setting is set to %250 but window.devicePixelRatio returns a value of "1". I would also really like to know why this changed in the first place so I can avoid it in the future.
html browser scale devicepixelratio
html browser scale devicepixelratio
edited Nov 15 at 1:34
Josh Lee
117k23210241
asked Nov 12 at 7:32
Thomas Bouffard
62
edited Nov 15 at 1:34
Josh Lee
117k23210241
asked Nov 12 at 7:32
Thomas Bouffard
62
edited Nov 15 at 1:34
Josh Lee
117k23210241
edited Nov 15 at 1:34
Josh Lee
117k23210241
edited Nov 15 at 1:34
Josh Lee
117k23210241
117k23210241
asked Nov 12 at 7:32
Thomas Bouffard
62
asked Nov 12 at 7:32
Thomas Bouffard
62
asked Nov 12 at 7:32
Thomas Bouffard
62
62
devicePixelRatio is not the pixel-density ratio of your monitor, it is the one between CSS pixels and physical pixels. OS and browser zoom levels will indeed impact this value. As to your issue, we would need to see how you do use this value in order to be able to help you more.
– Kaiido
Nov 12 at 7:37
This value is just used as a scalar, it's multiplied with the length properties of the UI elements. So if the pixel is half the standard size, the intent is that this scalar draws all 10px rectangles as 20px wide instead. If that isn't the right value for what I want, I would be happy for a suggested alternative, but it also leaves me confused as to why it ever worked at all.
– Thomas Bouffard
Nov 12 at 8:26
yes that is the one value we have access to, but be careful it includes the zoom levels so you will want to at least round it. May interest you:stackoverflow.com/questions/53062962/…
– Kaiido
Nov 12 at 8:32
Thanks for the link! I'm going to re-read it again when I'm more awake but I do have a few points to make until then. I am not using fullscreen and am not really worried about crisp rendering in the ui, the game itself dynamically fits the window and the viewport scales to best fit the underlying scene rectangle, it makes no assumption about window size or aspect ratio on load, this is part of what makes sizing the UI so difficult as it can't use the canvas dimensions, its size needs to tie to the real world regardless of the size relative to the scene that results.
– Thomas Bouffard
Nov 12 at 9:37
add a comment |
devicePixelRatio is not the pixel-density ratio of your monitor, it is the one between CSS pixels and physical pixels. OS and browser zoom levels will indeed impact this value. As to your issue, we would need to see how you do use this value in order to be able to help you more.
– Kaiido
Nov 12 at 7:37
This value is just used as a scalar, it's multiplied with the length properties of the UI elements. So if the pixel is half the standard size, the intent is that this scalar draws all 10px rectangles as 20px wide instead. If that isn't the right value for what I want, I would be happy for a suggested alternative, but it also leaves me confused as to why it ever worked at all.
– Thomas Bouffard
Nov 12 at 8:26
yes that is the one value we have access to, but be careful it includes the zoom levels so you will want to at least round it. May interest you:stackoverflow.com/questions/53062962/…
– Kaiido
Nov 12 at 8:32
Thanks for the link! I'm going to re-read it again when I'm more awake but I do have a few points to make until then. I am not using fullscreen and am not really worried about crisp rendering in the ui, the game itself dynamically fits the window and the viewport scales to best fit the underlying scene rectangle, it makes no assumption about window size or aspect ratio on load, this is part of what makes sizing the UI so difficult as it can't use the canvas dimensions, its size needs to tie to the real world regardless of the size relative to the scene that results.
– Thomas Bouffard
Nov 12 at 9:37
devicePixelRatio is not the pixel-density ratio of your monitor, it is the one between CSS pixels and physical pixels. OS and browser zoom levels will indeed impact this value. As to your issue, we would need to see how you do use this value in order to be able to help you more.
– Kaiido
Nov 12 at 7:37
devicePixelRatio is not the pixel-density ratio of your monitor, it is the one between CSS pixels and physical pixels. OS and browser zoom levels will indeed impact this value. As to your issue, we would need to see how you do use this value in order to be able to help you more.
– Kaiido
Nov 12 at 7:37
This value is just used as a scalar, it's multiplied with the length properties of the UI elements. So if the pixel is half the standard size, the intent is that this scalar draws all 10px rectangles as 20px wide instead. If that isn't the right value for what I want, I would be happy for a suggested alternative, but it also leaves me confused as to why it ever worked at all.
– Thomas Bouffard
Nov 12 at 8:26
This value is just used as a scalar, it's multiplied with the length properties of the UI elements. So if the pixel is half the standard size, the intent is that this scalar draws all 10px rectangles as 20px wide instead. If that isn't the right value for what I want, I would be happy for a suggested alternative, but it also leaves me confused as to why it ever worked at all.
– Thomas Bouffard
Nov 12 at 8:26
yes that is the one value we have access to, but be careful it includes the zoom levels so you will want to at least round it. May interest you:stackoverflow.com/questions/53062962/…
– Kaiido
Nov 12 at 8:32
yes that is the one value we have access to, but be careful it includes the zoom levels so you will want to at least round it. May interest you:stackoverflow.com/questions/53062962/…
– Kaiido
Nov 12 at 8:32
Thanks for the link! I'm going to re-read it again when I'm more awake but I do have a few points to make until then. I am not using fullscreen and am not really worried about crisp rendering in the ui, the game itself dynamically fits the window and the viewport scales to best fit the underlying scene rectangle, it makes no assumption about window size or aspect ratio on load, this is part of what makes sizing the UI so difficult as it can't use the canvas dimensions, its size needs to tie to the real world regardless of the size relative to the scene that results.
– Thomas Bouffard
Nov 12 at 9:37
Thanks for the link! I'm going to re-read it again when I'm more awake but I do have a few points to make until then. I am not using fullscreen and am not really worried about crisp rendering in the ui, the game itself dynamically fits the window and the viewport scales to best fit the underlying scene rectangle, it makes no assumption about window size or aspect ratio on load, this is part of what makes sizing the UI so difficult as it can't use the canvas dimensions, its size needs to tie to the real world regardless of the size relative to the scene that results.
– Thomas Bouffard
Nov 12 at 9:37
add a comment |
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53257606%2fdevicepixelratio-appears-to-be-suddenly-stacking-with-windows-scale%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
active
oldest
votes
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53257606%2fdevicepixelratio-appears-to-be-suddenly-stacking-with-windows-scale%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
devicePixelRatio is not the pixel-density ratio of your monitor, it is the one between CSS pixels and physical pixels. OS and browser zoom levels will indeed impact this value. As to your issue, we would need to see how you do use this value in order to be able to help you more.
– Kaiido
Nov 12 at 7:37
This value is just used as a scalar, it's multiplied with the length properties of the UI elements. So if the pixel is half the standard size, the intent is that this scalar draws all 10px rectangles as 20px wide instead. If that isn't the right value for what I want, I would be happy for a suggested alternative, but it also leaves me confused as to why it ever worked at all.
– Thomas Bouffard
Nov 12 at 8:26
yes that is the one value we have access to, but be careful it includes the zoom levels so you will want to at least round it. May interest you:stackoverflow.com/questions/53062962/…
– Kaiido
Nov 12 at 8:32
Thanks for the link! I'm going to re-read it again when I'm more awake but I do have a few points to make until then. I am not using fullscreen and am not really worried about crisp rendering in the ui, the game itself dynamically fits the window and the viewport scales to best fit the underlying scene rectangle, it makes no assumption about window size or aspect ratio on load, this is part of what makes sizing the UI so difficult as it can't use the canvas dimensions, its size needs to tie to the real world regardless of the size relative to the scene that results.
– Thomas Bouffard
Nov 12 at 9:37