I've noticed that a small laptop with a 1920x1080 screen, windows 10 will auto adjust the scaling. I've seen it as high as 150%. Is there a way we can detect this? My media queries don't kick in as they're set in px.
Add a comment
|
5 Answers
Try accessing window.devicePixelRatio variable.
The Window property devicePixelRatio returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current display device. This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel. In simpler terms, this tells the browser how many of the screen's actual pixels should be used to draw a single CSS pixel.
More info about it: https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio
You could also use CSS resolution for this, more about this here: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/resolution
@media (resolution: 150dpi) {
p {
color: red;
}
}
5 Comments
MaVRoSCy
please add some more info to your answer so other users can be helped better... maybe some link...
Martin Adámek
sure, updated my answer with some description from MDN + link to it
Martin Adámek
i also added note about possible pure CSS solution
Mark Handy
Even better. I've got a strange edge case with a nav fly out on small laptops and a higher than normal pixel ratio causing side scroll.
Chris Hayes
FYI - I have my scaling at 150% (
window.devicePixelRatio = 1.5), but the CSS would only work for 144dpi - @media (resolution: 144dpi). No idea why. So, I'd recommend using something like @media (min-resolution: 125dpi) to handle this.This isn't specifically what OP asked for, but what I think a lot of users landing on this question will be asking..
150% text scaling in Windows 10 is breaking my webpage, what can I do about it?
Approach
- First, make sure you're using
remfor font-sizing on the problem text. - Now you can scale ALL text at once with a single
mediaquery from the roothtmlelement.
This avoids any CSS transform scaling which inevitably results in a blurry result.
HTML root media query
/* Handle 125% and 150% Windows 10 Font Scaling on 96dpi monitors */
@media (min-resolution: 120dpi) {
html {
font-size: 80%;
}
}
Adjust the 80% to your liking, less = smaller text
Note: Be aware that 150% scaling doesn't mean 150dpi. Most monitors are either 72dpi or 96dpi. So, 150% scaling would mean 108dpi or 144dpi as the min-resolution you're querying.
rem Font-Sizing
And make sure you're using rem for fonts, for example:
p {
font-size: 1rem;
}
If you're using px, you don't have to change everything, just do it for the text that is causing issues.
Edit - Accessibility Issues: User preferences should always come first. Down-scaling font size in response to Windows text upscaling would be a UX antipattern and disproportionately affect visually impaired users. Ideally, use this only as a last resort.
2 Comments
Chris Hayes
@DarrenTreat 1. I respect that you feel strongly about accessibility, but comments like that are not in line with the kind of community we try to foster on StackOverflow. stackoverflow.com/conduct 2. My solution was in response to Windows laptops using 150% scaling by default for all users. I can't say I understand why Windows has that default, but if you have a better solution I'd invite you to provide it.
Sonicjet
That is super fair, my response was out of line. Your solution does what is expected but the reality is that the top comment on this question should be “Don’t.” Or better yet, use your solution of REM here to provide an option for the user to allow less dense scaling in a settings page if they so choose. This method above directly can cause users who are hard of sight to be unable to use the product. This can even open the product up to ADA lawsuits.
For anyone looking into this, building a little on Martin Adamek's answer, you can do this in jQuery and scale something with CSS transform:
// if the user has display scaling active, scale with CSS transform
if (window.devicePixelRatio !== 1){
let scaleValue = (1/window.devicePixelRatio);
$('#containerToBeScaled').css('transform','scale('+scaleValue+')');
}
This works well if you have a pop-Up for example and you want it to look the same regardless of display scaling
Comments
I tried to detect the scale on chrome for android: window.devicePixelRatio stayed 1 independent to zooming.
But window.visualViewport.scale (read only) worked for me
Comments
This may help too:
#container-to-be-scaled {
max-height: 100vh;
max-width: 100vw;
overflow: auto;
}
or similar adjustments as desired.
