Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #40255 > unrolled thread

Downscale browser content.

Back to article view | Back to comp.lang.javascript

Contents

  Downscale browser content. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-06-26 14:38 -0700
    Re: Downscale browser content. JJ <jj4public@gmail.com> - 2021-06-27 12:34 +0700
    Re: Downscale browser content. Arno Welzel <usenet@arnowelzel.de> - 2021-06-27 10:41 +0200
      Re: Downscale browser content. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-06-27 02:17 -0700
        Re: Downscale browser content. Arno Welzel <usenet@arnowelzel.de> - 2021-06-27 14:10 +0200
          Re: Downscale browser content. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-06-27 08:27 -0700
          Re: Downscale browser content. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-06-27 08:31 -0700
            Re: Downscale browser content. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-06-27 08:40 -0700
              Re: Downscale browser content. Arno Welzel <usenet@arnowelzel.de> - 2021-06-27 23:40 +0200
                Re: Downscale browser content. Jonas Thörnvall <jonas.thornvall@gmail.com> - 2021-06-27 16:01 -0700
                  Re: Downscale browser content. The Natural Philosopher <tnp@invalid.invalid> - 2021-06-28 12:15 +0100
                  Re: Downscale browser content. Arno Welzel <usenet@arnowelzel.de> - 2021-06-28 14:50 +0200

#40255 — Downscale browser content.

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

[toc] | [next] | [standalone]

#40256

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`?

[toc] | [prev] | [next] | [standalone]

#40257

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

[toc] | [prev] | [next] | [standalone]

#40258

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". 
> 
> -- 
> Arno Welzel 
> https://arnowelzel.de
Do this also apply to forms and HTML?

[toc] | [prev] | [next] | [standalone]

#40259

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

[toc] | [prev] | [next] | [standalone]

#40260

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> 
> >> 
> >> 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.

[toc] | [prev] | [next] | [standalone]

#40261

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> 
> >> 
> >> 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.

[toc] | [prev] | [next] | [standalone]

#40262

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> 
> > >> 
> > >> 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.

[toc] | [prev] | [next] | [standalone]

#40265

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> 
>>>>>
>>>>> 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

[toc] | [prev] | [next] | [standalone]

#40266

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> 
> >>>>> 
> >>>>> 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!

[toc] | [prev] | [next] | [standalone]

#40268

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

[toc] | [prev] | [next] | [standalone]

#40269

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web