Stack Overflow
Stack Overflow

Questions tagged [devicepixelratio]

33 questions
6
votes
0 answers

Why is my device resolution / devicePixelRatio not equal to my CSS' viewport width?

My device (Macbook Pro 2019 16") has a resolution of 3072 x 1920. When entering the realm of CSS, pixel units are "normalized". From my understanding, each CSS pixel is equal to my window.devicePixelRatio in device pixels. In my case,…
Tom
  • 8,536
  • 31
  • 133
  • 232
2
votes
0 answers

Canvas gets blurred on various coordinates (browser zoom level < 100%)

I am using a device that has devicePixelRatio of 1. On scroll, I am re-rendering the canvas by adding 1 or -1 to the y position. It affects the rendering quality and more importantly, the rendering position keeps changing on scroll. For instance, if…
UNKNOWN .MR.
  • 21
  • 2
2
votes
0 answers

Why doesn't window.devicePixelRatio change on zoom in Safari?

Context: I'm using window.devicePixelRatio to determine the display resolution for a few canvases on a website. To the best of my knowledge, the DPR value should change when zooming in and out on a website. This is what happens on Chrome. But it…
Stanley Zhong
  • 21
  • 3
2
votes
3 answers

Resolution aware images not working - Flutter

I am trying to add resolution aware image markers to google maps by converting each image to bitmap as such: static Future makeBitmapDescriptor(String path) { return BitmapDescriptor.fromAssetImage( …
Shaveen
  • 175
  • 2
  • 12
2
votes
1 answer

HTML5 canvas is showing as aliased on downscaling a drawing in Chrome

Requirement: So I am using a html5 canvas to perform drawings on an iPad(2732 * 2048) and store the pixels drawn so I can reuse them. Now I need to show the same drawing on a website as a downscaled version (615 * 460) by redrawing it per…
abhijitsinha89
  • 58
  • 1
  • 10
2
votes
1 answer

can't get sharp lines on html canvas element

I have been having quite a time trying to get pixel perfect straight lines on a canvas element. I have tried a number of solutions that have been proposed on other stackoverflow issues and on an issue opened on the WebGL github repo. I'm still not…
JohnRDOrazio
  • 1,358
  • 2
  • 15
  • 28
2
votes
0 answers

Reliably calculate accurate device resolution

Assuming window.devicePixelRatio and device-width are set by display manufacturers and could potentially return incorrect values, are there any other reliable ways to accurately calculate the resolution of the physical pixels on a display? I'll use…
David J. Aldred
  • 21
  • 1
  • 3
2
votes
0 answers

Incorrect window.devicePixelRatio in iframe

Basically window.devicePixelRatio shows the wrong value when used within an iframe. It shows 2.5 on top level but 2 within an iframe. You can see the value used within an iframe here: https://codepen.io/KennyLindahl/pen/wvBxjGb Now type…
Kenny Lindahl
  • 161
  • 7
2
votes
0 answers

How to set correct sizes from Adobe Illustrator / Sketch to flutter?

I've created a design using Sketch and AI (adobe illustrator) and basing on that I've created the structure on flutter. The problem there is that the pixels and pt sizes on Sketch do not corresponding to the size of pixels (?) in Flutter. I know…
hooverest
  • 31
  • 2
2
votes
0 answers

Images look blurred when I used canvasPattern as pointBackgroundColor

Expected Behavior Images should look good without blur in all screen resolutions. It looks good in the PC resolution. Current Behavior Images looks blurred on mobile resolutions. Here is my code HTML
Raj Kumar
  • 953
  • 1
  • 8
  • 19
1
vote
0 answers

In macos 10.15, using CMake's MACOSX_BUNDLE causes qt5.12.11 to get devicePixelRatio of 1?

CMake add to MACOSX_BUNDLE to use, I can build to get the .app folder, but Qt5.12.11 show devicePixelRatio: 1 (expected should be 2). But when I block the MACOSX_BUNDLE macro, I can't build to get the .app folder, but Qt5.12.11 show …
XMuli
  • 11
  • 4
1
vote
0 answers

Chart.js bar chart shrinks in web app after inactivity

I've created a dashboard-type PWA using Angular and Chart.js. When the app is first rendered, the bar charts always render correctly. However, when the app is "woken up" on a mobile device after being inactive for a while, the chart size is…
Steven Roth
  • 75
  • 4
1
vote
0 answers

CSS upscaling / force resolution

I'm working on a webgame and for performance reasons I'd like to render the UI at a certain resolution (lets say 640x480) and scale it up (just like you'd do with an image). Some transformations and background effects require quite some…
Martijnh
  • 333
  • 2
  • 10
1
vote
1 answer

Device pixel ratio not simulating in Chrome/Firefox dev tools?

I've been testing different DPRs using Chrome and Firefox dev tools, and it appears that changing the DPR has no obvious effect on the final render. I tried multiple test cases, both real life photos and illustrations. I made sure that the…
Tom T
  • 314
  • 2
  • 12
1
vote
1 answer

Image display size reduce to half when using srcset on hi dpr screens

Running into an issue is that I have img tags structured as below
AndrewWang
  • 81
  • 1
  • 8
1
2 3