Open on a real phone
Scan to validate on hardware. Emulation catches layout; real GPUs catch the rest.
CardSkins-style cut-off on S26 Ultra usually means content is wider than the CSS viewport (Samsung “Display size / Font size” shrinks logical width). DevTools frames show exact CSS sizes; auto-fit can clip or scale so nothing hangs off the right.
1. Preview here — pick S26 Ultra (Large display) (360×800) and the wide variant. Grid → “CardSkins problem set”.
2. Drop-in script for any project:
<script src="https://preview.217-216-65-190.sslip.io/device-lab/fit.js"
data-mode="clip" defer></script>
Modes: detect (badge only) · clip (overflow-x clip, safe) · scale (shrink to fit + center).
Override via query: ?hivefit=scale · force badge: &hivefitbadge=1
3. Proper CSS (preferred long-term):
html, body { overflow-x: clip; max-width: 100%; }
img, video, canvas { max-width: 100%; height: auto; }
.container { width: 100%; min-width: 0; box-sizing: border-box; }
/* avoid 100vw — it includes scrollbar and can overflow */
Live device metrics are in the left panel. On a real phone, open this lab or append ?hivefit=detect to your site after including fit.js.
Scan to validate on hardware. Emulation catches layout; real GPUs catch the rest.