0

Imagine a website full of components and texts and it works well on 1920 x 1080 notebook screen.

If you project the image from 1920 x 1080 notebook to 3840 × 2160 display it will look the same on both screens, maybe a bit blurry because of upscaling.

But how can I achieve the same result with 3840 × 2160 notebook screen so it will look exactly the same as it was on 1920 x 1080 notebook?

Suppose I have a way to detect if resolution is higher then 1920 x 1080. Just using scaling won't achieve desired result.

transform: scale(2);

... as website will just stretch outside layout. Something like scaling every font, image or anything that is not defined in percentages.

In my head there is an idea that if somehow you could stop site from expanding wider than 1920px (density wise) and fill the blank by scaling the content proportionally, but is sounds like madness, any advice?

isherwood
  • 58,414
  • 16
  • 114
  • 157
N7D
  • 192
  • 3
  • 12
  • 1
    Will you also want it to look the same way on a cell phone? – Robert Harvey Jun 11 '19 at 14:58
  • No, just if above 1920 width. It's like no layout changes at all after Full HD reached. – N7D Jun 11 '19 at 15:00
  • 1
    https://www.youtube.com/watch?v=G-5L1ay5xI4 – Robert Harvey Jun 11 '19 at 15:08
  • Fascinating, didn't know about "zoom" property. It looks like a great solution, if it would've been working in Firefox :( – N7D Jun 11 '19 at 15:12
  • 1
    You'd just extend the other responsive behaviors (page wrapper width, font sizes) accordingly. No zoom or other whizbang is necessary. The question is too broad for SO, though. – isherwood Jun 11 '19 at 15:20
  • For Firefox: https://stackoverflow.com/q/10063228 – Robert Harvey Jun 11 '19 at 15:29
  • Also https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/tabs/setZoom – Robert Harvey Jun 11 '19 at 15:30
  • Although approach in the first link is being mentioned so often it actually does not behave like zoom property at all. I even mentioned it in the question. Does the second one set browser zoom level or works like zoom property does? – N7D Jun 11 '19 at 17:18

1 Answers1

0

There is a zoom property in CSS as Robert Harvey mentioned. To scale component twice add this line to the HTML container:

zoom: 2;

But it is not supported in any version of Firefox. You can still achieve similar effect in Firefox if you scale everything up and decrease width proportionally:

-moz-transform: scale(2);
-moz-width: 50%;
-moz-transform-origin: top left;

It will work if you don't need to scroll horizontally, BUT it adds scrollbar to page, that might not be present with zoom and also scales scrollbars inside element making them fat (which is not a problem if you don't need scrollbars inside container).

N7D
  • 192
  • 3
  • 12