53 lines
1.7 KiB
JavaScript
53 lines
1.7 KiB
JavaScript
<script>
|
||
(function() {
|
||
const overlay = document.createElement("div");
|
||
overlay.id = "debug-overlay";
|
||
Object.assign(overlay.style, {
|
||
position: "fixed",
|
||
bottom: "10px",
|
||
left: "10px",
|
||
background: "rgba(0,0,0,0.7)",
|
||
color: "white",
|
||
fontSize: "12px",
|
||
fontFamily: "monospace",
|
||
padding: "8px 10px",
|
||
borderRadius: "8px",
|
||
zIndex: "9999",
|
||
lineHeight: "1.4",
|
||
pointerEvents: "none",
|
||
whiteSpace: "nowrap"
|
||
});
|
||
document.body.appendChild(overlay);
|
||
|
||
function getSample() {
|
||
// 🎯 Bevorzugt den Textbereich mit ID "txt", sonst das erste <p>
|
||
return document.querySelector("#txt") || document.querySelector("p");
|
||
}
|
||
|
||
function updateInfo() {
|
||
const sample = getSample();
|
||
const computed = sample ? getComputedStyle(sample) : {};
|
||
const fontSize = computed.fontSize || "unknown";
|
||
const fontFamily = computed.fontFamily || "unknown";
|
||
const transform = computed.transform || "none";
|
||
const transformOrigin = computed.transformOrigin || "center";
|
||
const metrics = sample ? sample.getBoundingClientRect() : { height: 0 };
|
||
|
||
overlay.innerHTML = `
|
||
<b>📏 Debug Info</b><br>
|
||
Viewport: ${window.innerWidth}px × ${window.innerHeight}px<br>
|
||
devicePixelRatio: ${window.devicePixelRatio}<br>
|
||
Font size (CSS): ${fontSize}<br>
|
||
Rendered height: ${metrics.height.toFixed(2)}px<br>
|
||
Font family: ${fontFamily}<br>
|
||
Transform: <span style="color:${transform !== "none" ? "orange" : "lime"};">${transform}</span><br>
|
||
Origin: ${transformOrigin}<br>
|
||
Zoom (approx): ${(100 / window.devicePixelRatio).toFixed(1)}%
|
||
`;
|
||
}
|
||
|
||
updateInfo();
|
||
window.addEventListener("resize", updateInfo);
|
||
window.addEventListener("scroll", updateInfo);
|
||
})();
|
||
</script> |