Zoom resolution server client 4k - FullHD

[botswana]

hi,
I’m looking for a simple way to realize different zoom factors on client (1080p) and server (2160p) screen.
would you do this with a custom css? how can I figure out the mods text tag?

[sdetweil]

@botswana there is currently no way to do different zoom levels (or content) by viewer (on the pi is just a different browser)

[sdetweil]

@botswana you might be able to use a customized css to set different font size based on screen resolution.

on another system I use

:root{
  --scale-factor: 1;  /* set default scaling in case we have partial window, debug or in vm terminal window */
}

@media screen  and (width:1920px) and (orientation: landscape) {
    :root{
        --scale-factor: 1920/1920;
     };
 }

@media screen and (width:3840px)  and (orientation: landscape) {
    :root{
    --scale-factor: 3840/1920;

    };
}
@media  screen and (width:1080px)   {
    :root{
    --scale-factor: 1920/1920;
    };
}

and then an example use

h1 {
    font-size:  calc( 120px * var(--scale-factor));
}

the 120px could be a variable too…

magicmirror sets these variables. maybe you can scale them by screen resolution and not have to mod everything… BUT many modules don’t use the predefined css styles

:root {
  --color-text: #999;
  --color-text-dimmed: #666;
  --color-text-bright: #fff;
  --color-background: #000;
  --font-primary: "Roboto Condensed";
  --font-secondary: "Roboto";
  --font-size: 20px;
  --font-size-xsmall: 0.75rem;
  --font-size-small: 1rem;
  --font-size-medium: 1.5rem;
  --font-size-large: 3.25rem;
  --font-size-xlarge: 3.75rem;
  --gap-body-top: 60px;
  --gap-body-right: 60px;
  --gap-body-bottom: 60px;
  --gap-body-left: 60px;
  --gap-modules: 30px;
}

and maybe css transform:scale()
https://caniuse.com/css-zoom