diff --git a/README.md b/README.md index a9eb122..c95a652 100644 --- a/README.md +++ b/README.md @@ -102,6 +102,9 @@ dist/ false outage) - Clickable service URLs - Canvas-based sparkline rendering with devicePixelRatio scaling +- Mobile detection: viewports narrower than 768px show a friendly "not yet + available on mobile" message instead of the monitoring UI (no polling or + network requests on mobile) - Zero runtime dependencies: all resources bundled into build artifacts ## Deployment @@ -125,6 +128,8 @@ properties. ## Limitations +- **Mobile**: Viewports below 768px wide show a static "not yet available" + message. The full monitoring UI requires a desktop-width browser. - **CORS**: Some hosts may block cross-origin HEAD requests. The app uses `no-cors` mode which allows the request but provides opaque responses. Latency is still measurable based on request timing. diff --git a/src/main.js b/src/main.js index 3ab6bb8..53a8d46 100644 --- a/src/main.js +++ b/src/main.js @@ -1126,11 +1126,46 @@ function handleResize(state) { }); } +// --- Mobile Detection -------------------------------------------------------- + +const MOBILE_BREAKPOINT = 768; + +function isMobileViewport() { + return window.innerWidth < MOBILE_BREAKPOINT; +} + +function buildMobileUI() { + const app = document.getElementById("app"); + app.innerHTML = ` +
`; +} + // --- Bootstrap --------------------------------------------------------------- async function init() { log.info("NetWatch starting"); + if (isMobileViewport()) { + log.info("Mobile viewport detected — skipping monitoring"); + buildMobileUI(); + return; + } + // Probe common gateway IPs to find the local router const gateway = await detectGateway(); const localHosts = [LOCAL_CPE];