Other then a browser zoom is there any script or API that can downscale the full content of browser "all elements".

On Sat, 26 Jun 2021 14:38:55 -0700 (PDT), Jonas Thörnvall wrote:
> Other then a browser zoom is there any script or API that can downscale
> the full content of browser "all elements".

`scale()` function of CSS's `transform` applied to `html` or `body`?

Jonas Thörnvall:

> Other then a browser zoom is there any script or API that can downscale the full content of browser "all elements".

You can use CSS transformations to scale the BODY element:

Also see:
<https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()>

Example: <https://arnowelzel.de/samples/scale.html>

Howerver - "all elements" needs to be calculated using JavaScript. There
is no method to tell the browser "scale as much as needed to show all
elements within the current viewport".

--
Arno Welzel
https://arnowelzel.de

söndag 27 juni 2021 kl. 10:41:45 UTC+2 skrev Arno Welzel:
> Jonas Thörnvall:
> > Other then a browser zoom is there any script or API that can downscale the full content of browser "all elements".
> You can use CSS transformations to scale the BODY element:
>
> Also see:
> <https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()>
>
> Example: <https://arnowelzel.de/samples/scale.html " rel="nofollow" target="_blank">https://arnowelzel.de/samples/scale.html>
>
> Howerver - "all elements" needs to be calculated using JavaScript. There
> is no method to tell the browser "scale as much as needed to show all
> elements within the current viewport".
>
> --
> Arno Welzel
> https://arnowelzel.de
Do this also apply to forms and HTML?

Jonas Thörnvall:

> söndag 27 juni 2021 kl. 10:41:45 UTC+2 skrev Arno Welzel:
>> Jonas Thörnvall:
>>> Other then a browser zoom is there any script or API that can downscale the full content of browser "all elements".
>> You can use CSS transformations to scale the BODY element:
>>
>> Also see:
>> <https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()>
>>
>> Example: <https://arnowelzel.de/samples/scale.html>
>>
>> Howerver - "all elements" needs to be calculated using JavaScript. There
>> is no method to tell the browser "scale as much as needed to show all
>> elements within the current viewport".
[...]
> Do this also apply to forms and HTML?

Well - I talked about CSS and refer to an example in HTML.

Why don't you just try it on your own?

--
Arno Welzel
https://arnowelzel.de

söndag 27 juni 2021 kl. 14:10:33 UTC+2 skrev Arno Welzel:
> Jonas Thörnvall:
> > söndag 27 juni 2021 kl. 10:41:45 UTC+2 skrev Arno Welzel:
> >> Jonas Thörnvall:
> >>> Other then a browser zoom is there any script or API that can downscale the full content of browser "all elements".
> >> You can use CSS transformations to scale the BODY element:
> >>
> >> Also see:
> >> <https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()>
> >>
> >> Example: <https://arnowelzel.de/samples/scale.html " rel="nofollow" target="_blank">https://arnowelzel.de/samples/scale.html>
> >>
> >> Howerver - "all elements" needs to be calculated using JavaScript. There
> >> is no method to tell the browser "scale as much as needed to show all
> >> elements within the current viewport".
> [...]
> > Do this also apply to forms and HTML?
> Well - I talked about CSS and refer to an example in HTML.
>
> Why don't you just try it on your own?
> --
> Arno Welzel
> https://arnowelzel.de
Well if it doesn't downscale forms it is not use to me.

söndag 27 juni 2021 kl. 14:10:33 UTC+2 skrev Arno Welzel:
> Jonas Thörnvall:
> > söndag 27 juni 2021 kl. 10:41:45 UTC+2 skrev Arno Welzel:
> >> Jonas Thörnvall:
> >>> Other then a browser zoom is there any script or API that can downscale the full content of browser "all elements".
> >> You can use CSS transformations to scale the BODY element:
> >>
> >> Also see:
> >> <https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()>
> >>
> >> Example: <https://arnowelzel.de/samples/scale.html " rel="nofollow" target="_blank">https://arnowelzel.de/samples/scale.html>
> >>
> >> Howerver - "all elements" needs to be calculated using JavaScript. There
> >> is no method to tell the browser "scale as much as needed to show all
> >> elements within the current viewport".
> [...]
> > Do this also apply to forms and HTML?
> Well - I talked about CSS and refer to an example in HTML.
>
> Why don't you just try it on your own?
> --
> Arno Welzel
> https://arnowelzel.de
It actually did, i will check it do all elements within the div even if canvas and other divs.

söndag 27 juni 2021 kl. 17:31:28 UTC+2 skrev Jonas Thörnvall:
> söndag 27 juni 2021 kl. 14:10:33 UTC+2 skrev Arno Welzel:
> > Jonas Thörnvall:
> > > söndag 27 juni 2021 kl. 10:41:45 UTC+2 skrev Arno Welzel:
> > >> Jonas Thörnvall:
> > >>> Other then a browser zoom is there any script or API that can downscale the full content of browser "all elements".
> > >> You can use CSS transformations to scale the BODY element:
> > >>
> > >> Also see:
> > >> <https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()>
> > >>
> > >> Example: <https://arnowelzel.de/samples/scale.html " rel="nofollow" target="_blank">https://arnowelzel.de/samples/scale.html>
> > >>
> > >> Howerver - "all elements" needs to be calculated using JavaScript. There
> > >> is no method to tell the browser "scale as much as needed to show all
> > >> elements within the current viewport".
> > [...]
> > > Do this also apply to forms and HTML?
> > Well - I talked about CSS and refer to an example in HTML.
> >
> > Why don't you just try it on your own?
> > --
> > Arno Welzel
> > https://arnowelzel.de
> It actually did, i will check it do all elements within the div even if canvas and other divs.
But it did not at least not without declare some div parent relationship? I just have to many elements divs forms canvas innerframes floating frame.
Thanks anyway.

Jonas Thörnvall:

> söndag 27 juni 2021 kl. 17:31:28 UTC+2 skrev Jonas Thörnvall:
>> söndag 27 juni 2021 kl. 14:10:33 UTC+2 skrev Arno Welzel:
>>> Jonas Thörnvall:
>>>> söndag 27 juni 2021 kl. 10:41:45 UTC+2 skrev Arno Welzel:
>>>>> Jonas Thörnvall:
>>>>>> Other then a browser zoom is there any script or API that can downscale the full content of browser "all elements".
>>>>> You can use CSS transformations to scale the BODY element:
>>>>>
>>>>> Also see:
>>>>> <https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()>
>>>>>
>>>>> Example: <https://arnowelzel.de/samples/scale.html " rel="nofollow" target="_blank">https://arnowelzel.de/samples/scale.html>
>>>>>
>>>>> Howerver - "all elements" needs to be calculated using JavaScript. There
>>>>> is no method to tell the browser "scale as much as needed to show all
>>>>> elements within the current viewport".
>>> [...]
>>>> Do this also apply to forms and HTML?
>>> Well - I talked about CSS and refer to an example in HTML.
>>>
>>> Why don't you just try it on your own?
>>> --
>>> Arno Welzel
>>> https://arnowelzel.de
>> It actually did, i will check it do all elements within the div even if canvas and other divs.
> But it did not at least not without declare some div parent relationship? I just have to many elements divs forms canvas innerframes floating frame.
> Thanks anyway.

CSS scale transform of the HTML element will scale *everything* inside
the HTML. Otherwise this wouldn't make sense at all. Usually applying
this to BODY is suffficient as well.

Just learn how to use your browser and the web developer tools of it and
manually add the following CSS rule after you loaded a website:

html {
transform: scale(0.5);
}

This will scale *everything* to 50% of the original size - yes, also
canvas elements and forms inside the document.

--
Arno Welzel
https://arnowelzel.de

söndag 27 juni 2021 kl. 23:40:44 UTC+2 skrev Arno Welzel:
> Jonas Thörnvall:
>
> > söndag 27 juni 2021 kl. 17:31:28 UTC+2 skrev Jonas Thörnvall:
> >> söndag 27 juni 2021 kl. 14:10:33 UTC+2 skrev Arno Welzel:
> >>> Jonas Thörnvall:
> >>>> söndag 27 juni 2021 kl. 10:41:45 UTC+2 skrev Arno Welzel:
> >>>>> Jonas Thörnvall:
> >>>>>> Other then a browser zoom is there any script or API that can downscale the full content of browser "all elements".
> >>>>> You can use CSS transformations to scale the BODY element:
> >>>>>
> >>>>> Also see:
> >>>>> <https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scale()>
> >>>>>
> >>>>> Example: <https://arnowelzel.de/samples/scale.html " rel="nofollow" target="_blank">https://arnowelzel.de/samples/scale.html>
> >>>>>
> >>>>> Howerver - "all elements" needs to be calculated using JavaScript. There
> >>>>> is no method to tell the browser "scale as much as needed to show all
> >>>>> elements within the current viewport".
> >>> [...]
> >>>> Do this also apply to forms and HTML?
> >>> Well - I talked about CSS and refer to an example in HTML.
> >>>
> >>> Why don't you just try it on your own?
> >>> --
> >>> Arno Welzel
> >>> https://arnowelzel.de
> >> It actually did, i will check it do all elements within the div even if canvas and other divs.
> > But it did not at least not without declare some div parent relationship? I just have to many elements divs forms canvas innerframes floating frame.
> > Thanks anyway.
> CSS scale transform of the HTML element will scale *everything* inside
> the HTML. Otherwise this wouldn't make sense at all. Usually applying
> this to BODY is suffficient as well.
>
> Just learn how to use your browser and the web developer tools of it and
> manually add the following CSS rule after you loaded a website:
>
> html {
> transform: scale(0.5);
> }
>
> This will scale *everything* to 50% of the original size - yes, also
> canvas elements and forms inside the document.
> --
> Arno Welzel
> https://arnowelzel.de

Great! best effort of today.
Thank you Arno, this will come in handy, i sized everything for 1920*1080, but there probably still people with laptops who want 1320*768.
I already have the code for decide size, now i just must make the CSS value dynamic!

Thanks Again Arno!

On 28/06/2021 00:01, Jonas Thörnvall wrote:
i sized everything for 1920*1080, but there probably still people with
laptops who want 1320*768.
> I already have the code for decide size, now i just must make the CSS value dynamic!

look at window.screen.width and window.screen.height to find out what
the users screen size is.
>

--
"Anyone who believes that the laws of physics are mere social
conventions is invited to try transgressing those conventions from the
windows of my apartment. (I live on the twenty-first floor.) "

Alan Sokal

Jonas Thörnvall:

> söndag 27 juni 2021 kl. 23:40:44 UTC+2 skrev Arno Welzel:
[...]
>> Just learn how to use your browser and the web developer tools of it and
>> manually add the following CSS rule after you loaded a website:
>>
>> html {
>> transform: scale(0.5);
>> }
>>
>> This will scale *everything* to 50% of the original size - yes, also
>> canvas elements and forms inside the document.
>
> Great! best effort of today.
> Thank you Arno, this will come in handy, i sized everything for 1920*1080, but there probably still people with laptops who want 1320*768.
> I already have the code for decide size, now i just must make the CSS value dynamic!
>
> Thanks Again Arno!

Another thin: keep in mind, that the viewport itself will not be scaled,
just the content inside. So you might need additional code to reduce the
size of the viewport as well or set a fixed scroll offset to position
the content correctly inside the browser window.

--
Arno Welzel
https://arnowelzel.de