Member Avatar for Divk

Hello,
Till date I've tested sites/designs by changing my monitor resolutions. A new project just came by, and when the tester changed the DPI, the webpage went wrong. It has been made fully in divs and looks good in different resolutions and browsers.

Can you please suggest what to do? This is the first time I've encountered this DPI issue...

Thanks
Div

  • 3 Contributors
  • 2 Replies
  • 113 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Troy III

Dani AI

Generated

Browsers and the OS map "CSS pixels" to device pixels differently when the system DPI (scaling) or browser zoom changes. That mapping is exposed as window.devicePixelRatio (check it in the console). When elements use fixed pixel widths, absolute lengths, or fixed heights, a change in DPI can make boxes overflow, images rasterize differently, or text reflow — which sounds like what saw. wanted clarification and asked for details; the steps below help reproduce and fix the issue.

  • Reproduce: change the OS display scaling (or the browser zoom) and observe the layout at 100% browser zoom with multiple scale settings.
  • Inspect: open DevTools and run window.devicePixelRatio and check document.documentElement.clientWidth to see how CSS pixels changed.
  • Search your CSS for hard pixel constraints (fixed width, height, position offsets) and absolute physical units (pt, in, cm) which do not behave the same across scalings.
  • Quick fixes: prefer fluid layouts (max-width, %, flex/grid), use relative type units (rem/em), make images max-width: 100% and avoid fixed heights on text containers; add box-sizing: border-box to simplify sizing.

For canvas or raster-image work, scale drawing by devicePixelRatio. For background on CSS pixels and absolute units see MDN on devicePixelRatio and the W3C section on absolute lengths: Window.devicePixelRatio Absolute length units.

Recommended Answers

All 2 Replies

Member Avatar for Member #656782

What do you mean by changing the DPI?

Member Avatar for Troy III

Hello,
Till date I've tested sites/designs by changing my monitor resolutions. A new project just came by, and when the tester changed the DPI, the webpage went wrong. It has been made fully in divs and looks good in different resolutions and browsers.

Can you please suggest what to do? This is the first time I've encountered this DPI issue...

Thanks
Div

Can you please explain what went wrong?
( Describe the issue or send a link if available )

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.