davidsgrogan.github.io/a.html at master · davidsgrogan/davidsgrogan.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!doctype html>
<meta name="viewport" content="width=device-width, initial-scale=1" />

<style>

:root {
    --sat: env(safe-area-inset-top);
    --mittens: env(preferred-text-scale);
}

  #safe-area::after {
    content: "env(preferred-text-scale): " var(--x-text);
    color: blue;
  }

  #scaled-text {
    text-size-adjust: calc(100% * env(preferred-text-scale));
  }

</style>

<script>
  const topInset = getComputedStyle(document.documentElement).getPropertyValue('--sat');
  console.log('safe-area-inset-top:', topInset);

  const mittens = getComputedStyle(document.documentElement).getPropertyValue('--mittens');
  document.documentElement.style.setProperty('--x-text', JSON.stringify(mittens));
  console.log('preferred-text-scale:', mittens);
</script>

This is normal text.

<p id="safe-area"></p>
<p id="scaled-text">
  This text should be env scaled.
</p>

<!-- <iframe src="https://davidsgrogan.github.io/iframe.html"></iframe> -->