https://setform.surf/js-min/typetest.js?v=20261005b

1const ANCHOR_PX = 1680;   
2const CAP_PX = 1920;      
3let mounted = false;
4export function mountTypeTest() {
5if (mounted) return;
6if (!document.body) {
7document.addEventListener('DOMContentLoaded', mountTypeTest, { once: true });
8return;
9}
10mounted = true;
11const root = document.documentElement;
12const probe = document.createElement('span');
13probe.style.cssText = 'position:absolute;visibility:hidden;font-size:var(--body-size)';
14document.body.appendChild(probe);
15const box = document.createElement('div');
16box.setAttribute('data-typetest', '');
17box.style.cssText = [
18'position:fixed', 'top:8px', 'left:50%', 'transform:translateX(-50%)',
19'z-index:2147483647', 'background:#fff', 'color:#111',
20'border:1px solid #bbb', 'border-radius:10px', 'padding:8px 12px',
21'box-shadow:0 6px 20px rgba(0,0,0,.3)',
22'font:13px ui-monospace,SFMono-Regular,Menlo,monospace',
23'display:flex', 'gap:10px', 'align-items:center', 'white-space:nowrap',
24].join(';');
25const read = document.createElement('span');
26const slider = document.createElement('input');
27slider.type = 'range';
28slider.min = '1'; slider.max = '2.2'; slider.step = '0.05'; slider.value = '1';
29slider.style.width = '180px';
30const zoneLabel = (w) =>
31w <= ANCHOR_PX ? 'flat =main' : w < CAP_PX ? 'ramping' : 'capped +15%';
32const refresh = () => {
33const w = window.innerWidth;
34const body = getComputedStyle(probe).fontSize;
35read.textContent =
36`w ${w} · ${zoneLabel(w)} · body ${body} · scale ×${(+slider.value).toFixed(2)}`;
37};
38const apply = () => {
39root.style.setProperty('--font-scale', slider.value);
40window.dispatchEvent(new Event('resize'));
41refresh();
42};
43const mkBtn = (label, onClick) => {
44const b = document.createElement('button');
45b.type = 'button';
46b.textContent = label;
47b.style.cssText = 'cursor:pointer;font:inherit;padding:2px 7px;border-radius:6px;border:1px solid #ccc;background:#f6f6f6';
48b.addEventListener('click', onClick);
49return b;
50};
51slider.addEventListener('input', apply);
52window.addEventListener('resize', refresh);
53box.append(
54read,
55slider,
56mkBtn('×1.25', () => { slider.value = '1.25'; apply(); }),
57mkBtn('×1.5', () => { slider.value = '1.5'; apply(); }),
58mkBtn('×1.75', () => { slider.value = '1.75'; apply(); }),
59mkBtn('×2', () => { slider.value = '2'; apply(); }),
60mkBtn('reset', () => { slider.value = '1'; apply(); }),
61);
62document.body.appendChild(box);
63refresh();
64}