CODEWITHSUNDEEP
javascriptcssresponsive-design
Ruslan Plastun
Ruslan Plastun

Reputation: 2254

Support high resolution displays while allowing zoom

I want my website to look the same on all screen sizes by default while allowing zoom to change its appearance when needed.

If I use percentages or vh / vw, then some elements of my page won't scale when a user zooms in / out. If I use px / rem / em, then those of my users that have high-resolution displays (e.g. 2560x1440) will see smaller ui elements than those that have lower resolution displays (e.g. 1920x1080).

A perfect solution would be a unit of measurement that, by default is proportional to screen size (like vw / vh / percentage), but that, at the same time, scales when a user zooms in / out. That way, the default behavior would be the same across all devices, and any user can zoom its screen as they want.

There is no such unit of measurement in CSS [3]. There is no way to implement it in sass, and zoom level is poorly supported in browsers in js [1], [2]. Why this technique is not supported yet, because it seems to be a great way to design websites. Same defaults for everyone, while allowing customization for everyone.

Upvotes: 0

Views: 67

Answers (2)

Petro Ivanenko
Petro Ivanenko

Reputation: 727

I have solved it using two media queries and a sass function. Here is a snippet from my sass files:

@function vw($px-vw, $base-vw: 1920px) {
  @return ($px-vw / $base-vw) * 100vw;
}

@media screen and (min-width: 0px) {
  .container {
    flex: 0 0 vw(280px);

    margin: vw(40px);
    border-radius: vw(30px);

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: #ffffff;
  }

  .logo_container {
    background-color: #ffffff;
    margin: vw(40px) vw(80px) vw(40px) vw(80px);
  }
}

@media screen and (min-width: 1920px) {
  .container {
    flex: 0 0 280px;

    margin: 40px;
    border-radius: 30px;

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: #ffffff;
  }

  .logo_container {
    border-radius: 30px;
    background-color: #ffffff;
    margin: 40px 80px 40px 80px;
  }
}

Upvotes: 1

A Haworth
A Haworth

Reputation: 36512

Would defining your own units using CSS variables and depending on the pixel dimensions of the initial window help?

e.g.

window.onload = function () {
  const w = window.innerWidth;
  const h = window.innerHeight;
  document.body.style.setProperty('--vmin', Math.min(w, h)/100 + 'px');
}
div {
  width: calc(10 * var(--vmin));
  height: calc(10 * var(--vmin));
  background-color: magenta;
}
<div></div>

Upvotes: 1

Related Questions