Logical viewport
The CSS-pixel dimensions that drive media queries, container behavior, and visible page area.
LAYOUTACCURACY / METHODKnow exactly what
Know exactly what
the page is seeing.
Bezel is designed for accurate, fast iteration—not magical claims. It changes a maintained set of device-profile signals while preserving the browser session and rendering engine you chose.
- PROFILE SIGNALS
- MODELED
- HOST ENGINE
- PRESERVED
- HARDWARE
- NOT CLAIMED
01 / SIGNAL MAPThree ways to look
Three ways to look
at the same layout.
The right tool depends on which layer of behavior you need to validate.
| Signal | Resize only | Bezel profile | Physical target |
|---|---|---|---|
| CSS viewportMedia queries and layout | Changed | Profile value | Native |
| Pixel ratioHigh-density assets and canvas | Host value | Profile value | Physical value |
| Device identityUA and client hints | Host value | Profile value | Native |
| Touch capabilityWhat the page detects | Host value | Reported | Physical input |
| Rendering engineChromium, Gecko, or WebKit | Host engine | Host engine | Target engine |
| Hardware behaviorSensors, network, OS input | Not modeled | Not modeled | Physical |
02 / PROFILE LAYER
What Bezel changes.
Each catalog entry is a coordinated profile, not a loose collection of independent toggles.
Device pixel ratio
The density value used by high-resolution media queries, canvas code, and image selection.
DISPLAY SIGNALDevice identity
User agent and supported client hints are coordinated with the selected device and platform.
IDENTITYTouch capability
Pages can detect the selected profile’s touch support and maximum touch-point count.
CAPABILITYSafe-area geometry
Insets and frame cutouts reveal content that collides with notches, islands, and system areas.
PHYSICAL GEOMETRYRequest controls
Supported identity and custom headers can exercise server-rendered branches, not only client CSS.
NETWORK SIGNAL03 / THE BOUNDARYA profile is not
A profile is not
a different browser engine.
BEZEL PROFILEViewport · DPR · Identity · Touch capability
↓
HOST BROWSERChromium or Gecko renders the page
↓
YOUR MACHINEMouse, keyboard, network, operating system
An iPhone profile in Chrome gives the page the maintained iPhone profile where extension APIs allow it. The pixels are still produced by Chromium, not WebKit.
That makes Bezel useful earlier and more often: it is immediate, local, and works with the session already open. For release sign-off, add target-engine and physical-device checks where the risk calls for them.
04 / PRACTICAL METHOD
A sensible testing ladder.
- 01Implement locally with Bezel
Exercise real breakpoints, device signals, safe areas, and authenticated flows while code is changing quickly.
- 02Cross-check browser engines
Run the extension in both Chromium and Firefox where engine differences matter.
- 03Verify high-risk paths on hardware
Use physical target devices for WebKit, true touch gestures, sensors, keyboard behavior, and OS integration.
- 04Capture the tested context
Export the profile and visual evidence so the result is reproducible by the rest of the team.
START WITH THE CURRENT TABFast enough for every breakpoint.