herrernst · February 13, 2025 13:00
diff --git a/zoom-vs-fontsize.html b/zoom-vs-fontsize.html
 <!doctype html>
 <html>
 <head>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <style>
   :root {
      font-family: sans-serif;
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%; /* needed for chrome to not increase some text and some not (in flexbox) */
   }
   /*
   body {
      margin: 0;
      padding: 0.5em;
   }
   */
   section {
      margin-top: 0.5em;
      margin-bottom: 0.5em;
      font-size: 16px;
      padding: 0.5rem;
      border: 1px solid currentColor;
   }
   section > :first-child {
      margin-top: 0;
   }
   .text {
      background: rgba(0, 0, 255, 0.5);
      line-height: 1;
   }
   .flex {
      display: flex;
      align-items: center;
   }
   .flex .box {
      margin: 16px;
   }
   .orientation {
      display: none;
   }
   .changed {
      color:  yellow;
   }
   .warning {
      color: orange;
   }
   @media (orientation: landscape) {
      .orientation.landscape {
         display: initial;
      }
   }
   @media (orientation: portrait) {
      .orientation.portrait {
         display: initial;
      }
   }
   .debug {
      opacity: 0.5;
   }
   #heightMeasure {
      line-height: 1;
   }
 </style>
 </head>
 <body>
 <section>
   <h2>Font size tests</h2>
   <div>
      <p>Browser font-size default: 1rem == 16px; detected: <span id="detectedFontSize"></span>, height: <span id="textHeight"></span></p>
   </div>
   <div class="flex">
      <div class="box text" style="font-size: 1rem">Font with 1rem size</div>
      <div class="box text" style="font-size: 16px">Font with 16px size</div>
   </div>
   <div class="flex">
      <div class="box text" style="font-size: 2rem">Font with 2rem size</div>
      <div class="box text" style="font-size: 32px">Font with 32px size</div>
   </div>
   <div class="flex">
      <div class="box"><img src="https://orf.at/app-infos/img/android/news.png" alt="News" style="width: 2rem; height: 2rem"><br>2rem</div>
      <div class="box"><img src="https://orf.at/app-infos/img/android/news.png" alt="News" style="width: 32px; height: 32px"><br>32px</div>
   </div>
 </section>
 <section>
   <h2>Page zoom / viewport tests</h2>
   <p id="heightMeasure">Orientation: <span class="orientation landscape">landscape</span><span class="orientation portrait">portrait</span></p>
   <p>Detected <a href="https://www.quirksmode.org/mobile/viewports.html">layout viewport</a> (innerWidth x innerHeight): <span id="viewport"></span> <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel">CSS pixels</a></p>
   <p class="debug">document size: <span id="documentSize"></span></p>
   <p class="debug">outerWidth / screen.availWidth = <span id="outerWidthValue"></span> / <span id="screenAvailWidth"></span> (weird/wrong on iOS?)</p>
   <p class="debug">width zoom ratio (excluding scroll bars): <span id="widthZoom"></span> (=1 if not zoomed and no scroll bars)</p>
   <p class="debug">devicePixelRatio: <span id="pixelRatio"></span> (changes in chrome and firefox, but not in safari, when zooming)</p>
   <p class="debug">visualViewport.scale: <span id="visualViewportScale"></span></p>
 </section>

 <script>
   for (eventName of ["resize", "load", "scroll"]) {
      addEventListener(eventName, () => {
         viewport.textContent = innerWidth + "x" + innerHeight
         const computedFontSize = getComputedStyle(document.body)["font-size"]
         detectedFontSize.textContent = computedFontSize
         const parsedFontSize = parseInt(computedFontSize, 10)
         detectedFontSize.classList.toggle("changed", parsedFontSize !== 16)
         const lineHeightSize = heightMeasure.clientHeight
         textHeight.textContent = lineHeightSize + "px"
         textHeight.classList.toggle("warning", lineHeightSize !== parsedFontSize)
         documentSize.textContent = document.documentElement.clientWidth + "x" + document.documentElement.clientHeight
         outerWidthValue.textContent = outerWidth
         screenAvailWidth.textContent = screen.availWidth
         widthZoom.textContent = outerWidth / innerWidth
         pixelRatio.textContent = devicePixelRatio
         visualViewportScale.textContent = visualViewport.scale
      })
   }
   for (eventName of ["resize", "scroll"]) {
      visualViewport.addEventListener(eventName, () => {
         visualViewportScale.textContent = visualViewport.scale
      })
   }
 </script>
 <!--
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 <p>
 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
 </p>
 -->
 </body>
 </html>
	<!doctype html>
	<html>
	<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	:root {
	font-family: sans-serif;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%; /* needed for chrome to not increase some text and some not (in flexbox) */
	}
	/*
	body {
	margin: 0;
	padding: 0.5em;
	}
	*/
	section {
	margin-top: 0.5em;
	margin-bottom: 0.5em;
	font-size: 16px;
	padding: 0.5rem;
	border: 1px solid currentColor;
	}
	section > :first-child {
	margin-top: 0;
	}
	.text {
	background: rgba(0, 0, 255, 0.5);
	line-height: 1;
	}
	.flex {
	display: flex;
	align-items: center;
	}
	.flex .box {
	margin: 16px;
	}
	.orientation {
	display: none;
	}
	.changed {
	color: yellow;
	}
	.warning {
	color: orange;
	}
	@media (orientation: landscape) {
	.orientation.landscape {
	display: initial;
	}
	}
	@media (orientation: portrait) {
	.orientation.portrait {
	display: initial;
	}
	}
	.debug {
	opacity: 0.5;
	}
	#heightMeasure {
	line-height: 1;
	}
	</style>
	</head>
	<body>
	<section>
	<h2>Font size tests</h2>
	<div>
	<p>Browser font-size default: 1rem == 16px; detected: <span id="detectedFontSize"></span>, height: <span id="textHeight"></span></p>
	</div>
	<div class="flex">
	<div class="box text" style="font-size: 1rem">Font with 1rem size</div>
	<div class="box text" style="font-size: 16px">Font with 16px size</div>
	</div>
	<div class="flex">
	<div class="box text" style="font-size: 2rem">Font with 2rem size</div>
	<div class="box text" style="font-size: 32px">Font with 32px size</div>
	</div>
	<div class="flex">
	<div class="box"><img src="https://orf.at/app-infos/img/android/news.png" alt="News" style="width: 2rem; height: 2rem"><br>2rem</div>
	<div class="box"><img src="https://orf.at/app-infos/img/android/news.png" alt="News" style="width: 32px; height: 32px"><br>32px</div>
	</div>
	</section>
	<section>
	<h2>Page zoom / viewport tests</h2>
	<p id="heightMeasure">Orientation: <span class="orientation landscape">landscape</span><span class="orientation portrait">portrait</span></p>
	<p>Detected <a href="https://www.quirksmode.org/mobile/viewports.html">layout viewport</a> (innerWidth x innerHeight): <span id="viewport"></span> <a href="https://developer.mozilla.org/en-US/docs/Glossary/CSS_pixel">CSS pixels</a></p>
	<p class="debug">document size: <span id="documentSize"></span></p>
	<p class="debug">outerWidth / screen.availWidth = <span id="outerWidthValue"></span> / <span id="screenAvailWidth"></span> (weird/wrong on iOS?)</p>
	<p class="debug">width zoom ratio (excluding scroll bars): <span id="widthZoom"></span> (=1 if not zoomed and no scroll bars)</p>
	<p class="debug">devicePixelRatio: <span id="pixelRatio"></span> (changes in chrome and firefox, but not in safari, when zooming)</p>
	<p class="debug">visualViewport.scale: <span id="visualViewportScale"></span></p>
	</section>

	<script>
	for (eventName of ["resize", "load", "scroll"]) {
	addEventListener(eventName, () => {
	viewport.textContent = innerWidth + "x" + innerHeight
	const computedFontSize = getComputedStyle(document.body)["font-size"]
	detectedFontSize.textContent = computedFontSize
	const parsedFontSize = parseInt(computedFontSize, 10)
	detectedFontSize.classList.toggle("changed", parsedFontSize !== 16)
	const lineHeightSize = heightMeasure.clientHeight
	textHeight.textContent = lineHeightSize + "px"
	textHeight.classList.toggle("warning", lineHeightSize !== parsedFontSize)
	documentSize.textContent = document.documentElement.clientWidth + "x" + document.documentElement.clientHeight
	outerWidthValue.textContent = outerWidth
	screenAvailWidth.textContent = screen.availWidth
	widthZoom.textContent = outerWidth / innerWidth
	pixelRatio.textContent = devicePixelRatio
	visualViewportScale.textContent = visualViewport.scale
	})
	}
	for (eventName of ["resize", "scroll"]) {
	visualViewport.addEventListener(eventName, () => {
	visualViewportScale.textContent = visualViewport.scale
	})
	}
	</script>
	<!--
	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	<p>
	Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
	</p>
	-->
	</body>
	</html>