Skip to content

Measure phone motion and tilt in the browser

Compare stillness, tilt and a return to flat, then save a phone sensor record with its access state and context.

Physics Phoebe: I want your placement and permission notes beside the reading before you compare it., your practice guide

Physics Phoebe: I want your placement and permission notes beside the reading before you compare it.
Predict the reading, then compare it with the measurement.

Phone browser (Web APIs)

Phone browser

Tier 2 · Phone browser · No account

Version tested: Chromium 151.0.7922.34 (Playwright, 390×844, scale 3); CDP accelerometer, linear-acceleration, gyroscope and relative-orientation overrides; Android Chrome/iOS Safari untested here. Date: 2026-09-10.

Open the lab on your phone over HTTPS, then use its permission button.

Open the phone lab (new tab)

Steps

Screens captured against Phone browser (Web APIs) Chromium 151.0.7922.34 (Playwright, 390×844, scale 3); CDP accelerometer, linear-acceleration, gyroscope and relative-orientation overrides; Android Chrome/iOS Safari untested here on 2026-09-10; the tool may have moved on — the text steps are the contract.

  1. 1 Step 1

    Do
    In the browser address field, open the prepared page on your phone over HTTPS. Read the secure-context message before starting.
    You will see
    Input: Opened the page in mobile Chromium at a secure localhost origin. Observed: “Secure context ready. Tap Start sensors.” appears. Expected: No readings should be collected before Start sensors. Interpretation: The panel says “Not started. No readings collected.”
    Why it matters
    Evidence: The page reports both secure context and the idle collection state. Boundary: A secure origin permits APIs but does not grant sensor access. Reason: Missing or denied readings must not be interpreted as zero. Next check: Start the browser sensor stream before recording values.
    Step 1: real mobile browser screenshot showing “Secure context ready. Tap Start sensors.” appears
    Step 1 · Phone browser (Web APIs); numbered callout added to a real capture. Enlarge screenshot (new tab)
  2. 2 Step 2

    Do
    In the sensor controls panel, tap Start sensors and allow motion and orientation if asked. Place the phone screen-up on a table.
    You will see
    Input: Started sensors in mobile Chromium with emulated sensor inputs in a real browser. Observed: Motion reads fresh x 0.20, y 0.10, z 9.80 m/s². Expected: A still screen-up phone may show about 9.8 m/s² on z from gravity. Interpretation: The page also displays rotation 0.6 / 1.1 / 1.7 °/s and a timestamp.
    Why it matters
    Evidence: The real DeviceMotion API received CDP sensor override readings. Boundary: These are emulated sensor inputs, not measurements from a physical phone. Reason: Gravity is included in accelerationIncludingGravity. Next check: Keep units and phone placement with the record.
    Step 2: real mobile browser screenshot showing Motion reads fresh x 0.20, y 0.10, z 9.80 m/s²
    Step 2 · Phone browser (Web APIs); numbered callout added to a real capture. Enlarge screenshot (new tab)
  3. 3 Step 3

    Do
    In the motion readout panel, hold the phone in portrait orientation and tilt it gently sideways. Watch gamma and the bubble.
    You will see
    Input: Applied a 15° sideways tilt through browser sensor emulation. Observed: The real page reads fresh α 0.0°, β 0.0°, γ 15.0°. Expected: Gamma should change from level when the phone tilts sideways. Interpretation: “Tilt detected — return to flat” appears and the bubble moves.
    Why it matters
    Evidence: The displayed value comes from emulated sensor inputs in real Chromium. Boundary: The bubble is a classroom cue, not a calibrated inclinometer. Reason: Gamma represents sideways tilt for this portrait orientation. Next check: Return to the original placement to check recovery.
    Step 3: real mobile browser screenshot showing The real page reads fresh α 0.0°, β 0.0°, γ 15.0°
    Step 3 · Phone browser (Web APIs); numbered callout added to a real capture. Enlarge screenshot (new tab)
  4. 4 Step 4

    Do
    In the motion readout panel, return the phone screen-up to the table and compare with the previous reading.
    You will see
    Input: Returned the browser’s emulated orientation to β 1° and γ 1°. Observed: The page reads fresh α 0.0°, β 1.0°, γ 1.0°. Expected: Both beta and gamma within 3° should trigger Near level. Interpretation: The page reports “Near level (within 3°)” after the 15° tilt.
    Why it matters
    Evidence: Two emulated sensor inputs were compared in the real browser. Boundary: The return does not calibrate a physical phone. Reason: Repeating the flat placement checks direction and recovery. Next check: Treat location as optional context, not a substitute motion value.
    Step 4: real mobile browser screenshot showing The page reads fresh α 0.0°, β 1.0°, γ 1.0°
    Step 4 · Phone browser (Web APIs); numbered callout added to a real capture. Enlarge screenshot (new tab)
  5. 5 Step 5

    Do
    In the location panel, tap Request location once. Allow it only if you want to; otherwise keep an area note.
    You will see
    Input: Requested one browser geolocation fix under a location override. Observed: The page shows 51.48160, -3.17910 with accuracy radius 25 m. Expected: The optional fix should display coordinates, uncertainty, and time. Interpretation: This is an emulated input in a real browser, not physical presence.
    Why it matters
    Evidence: The geolocation API supplied one fix to the actual page. Boundary: A 25 m radius cannot prove a route or continuous presence. Reason: Location uncertainty belongs with any decision using the fix. Next check: Save only the context needed for the comparison.
    Step 5: real mobile browser screenshot showing The page shows 51.48160, -3.17910 with accuracy radius 25 m
    Step 5 · Phone browser (Web APIs); numbered callout added to a real capture. Enlarge screenshot (new tab)
  6. 6 Step 6

    Do
    In the snapshot note field, write your placement and flat–tilt–flat comparison in the note. Tap Save a snapshot, then inspect the latest record.
    You will see
    Input: Saved the placement note after the emulated motion, tilt, and location run. Observed: The page says “1 saved records. Nothing is sent.” Expected: The local record should include source, time, access context, and validity. Interpretation: The expanded record shows DeviceMotionEvent, m/s², and “unreviewed”.
    Why it matters
    Evidence: The saved record was read from the real page and localStorage. Boundary: Emulated sensor inputs in a real browser remain unreviewed data. Reason: Context and source let a later reviewer judge comparability. Next check: Stop collection so old values are not presented as live.
    Step 6: real mobile browser screenshot showing The page says “1 saved records. Nothing is sent.”
    Step 6 · Phone browser (Web APIs); numbered callout added to a real capture. Enlarge screenshot (new tab)
  7. 7 Step 7

    Do
    Tap Stop sensors, then return to the motion panel. Download your JSON if needed and clear saved records when finished.
    You will see
    Input: Stopped the browser sensor listeners after the saved comparison. Observed: The access panel says “Motion: stopped. Orientation: stopped.” Expected: The last orientation value should no longer update as live. Interpretation: A further injected 20° value did not appear after Stop sensors.
    Why it matters
    Evidence: The page changed access state and the stopped-reading check passed. Boundary: An old displayed number is no longer a fresh observation. Reason: A bounded collection window prevents stale evidence. Next check: Download if needed, then clear local records.
    Step 7: real mobile browser screenshot showing The access panel says “Motion: stopped. Orientation: stopped.”
    Step 7 · Phone browser (Web APIs); numbered callout added to a real capture. Enlarge screenshot (new tab)

Chapter checks

These questions refer to the chapter’s examples. Use the return links to review their answers.

  1. A participatory noise survey receives phone readings with no location context or permission state. How should the dataset treat them?

    Return to the chapter’s knowledge check
  2. A class collects phone-based sound observations, but some records lack timestamp, access state, and phone placement notes. What is the strongest review feedback before comparing the submissions?

    Return to the chapter’s knowledge check

Caution

Keep the phone over a table and tilt gently. Browser support and permission prompts vary. A missing value is not zero. Location is optional and can be sensitive; records stay in this browser until you download them. This is a classroom comparison, not a calibrated level or continuous tracker.

Return to Participatory Sensing · Browse Labs