Dev.to WebDev πŸ›  Dev πŸ‘ 0 πŸ“– 3 min read

Do the OnePassApps Studios Work on a Phone? Measured at 390 x 844

I work on OnePassApps, the team behind app.onepassapps.com, so this is a measurement of our own product in a real browser at phone size - not a guess about how a phone should behave. Online file tools are usually design

I work on OnePassApps, the team behind app.onepassapps.com, so this is a measurement of our own product in a real browser at phone size - not a guess about how a phone should behave.

Online file tools are usually designed on a desktop and then glanced at on a phone, which is backwards. I did it the other way round: I emulated an iPhone-sized viewport in Chrome and measured three of the studios against it. Every number below is a reading taken today, 4 November 2026, signed out.

What I set up

I drove the persistent Chrome on display :1 over CDP with three changes and nothing else:

  • Emulation.setDeviceMetricsOverride with width 390, height 844, deviceScaleFactor 3 and mobile: true
  • Emulation.setTouchEmulationEnabled with touch points enabled
  • an iPhone user-agent string

The page's own viewport tag reads "width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content", and the measured viewport came back as 390 by 844 at a device pixel ratio of 3.

The page does not scroll sideways

On all three routes the document width and the viewport width were identical - 390 pixels, with no horizontal overflow of the page itself. That is the easy half of mobile layout, and it holds.

The tool tabs do scroll sideways - and that is the honest caveat

The tool switcher on every studio is a horizontal scroller: a flex row with overflow-x: auto and overscroll-x-contain. Measured against a 358-pixel-wide strip:

  • Text Studio, 8 tabs: scrollWidth 823 against clientWidth 358
  • Image Studio, 7 tabs: 762 against 358
  • Data Studio, 11 tabs: 1208 against 358

So the last tab of each row sits off the right edge of the screen - the measured right edge of the Base64 tab was at x=831, of the PDF tab at x=770 and of the YAML tab at x=1216, on a 390-pixel-wide viewport. The tabs are labelled Clean, Case, Duplicates, Sort, Replace, Diff, Markdown, Base64 on the Text Studio, Convert, Compress, Resize, Crop, Background, Metadata, PDF on the Image Studio and Viewer, Sort / filter, Columns, Duplicates, Merge, Split, To JSON, Formatter, Validator, To CSV, YAML on the Data Studio.

The practical reading: on a phone you swipe the strip to reach the later tools. It is a deliberate trade - wrapping the row instead would push every studio's panel down by a second line - but it is the one thing worth knowing before you hand someone your phone and point them at a specific tool.

The tap targets hold up

On the Text Studio 16 buttons were visible, on the Image Studio 19 and on the Data Studio 22, and not one of them was shorter than 44 CSS pixels. Every tool tab measured 44 pixels tall. The file inputs are the usual 1 by 44 pixel inputs with tabindex="-1", so they stay out of the tab order and the way in is the named "Browse files" button, which measured 134 by 44.

A real job, finished at phone size

On the Text Studio's Base64 tab I typed 43 characters and pressed Encode. The counters read Words 7, Characters 43, Sentences 0, Lines 2, UTF-8 bytes 43, and the result panel came back Ready with "UTF-8 text encoded locally.", "Encoded in 0.1 s" and "60 characters Β· 1 line", next to Copy, "Download .txt" and "Use as input".

Nothing left the tab. The page's own two sentences are "Nothing leaves this tab." and "Processing stays in this browser.", and they were there at this width, not just on a desktop. The plan block also renders at phone size with the same wording as the desktop: "Standard is free right now", "$0 / month" and "100,000 credits every 30 days Β· No end date set Β· No card required".

What I did not test

  • This is viewport emulation in desktop Chrome, not a physical phone.
  • I selected the off-screen tabs programmatically, so I did not perform the swipe gesture itself.
  • I ran a tool on the Text Studio only. I read the Image and Data panels, but I did not run a conversion in either.
  • I did not tap a real file picker, so the platform's own file dialog on a phone is untested.
  • Signed out, one build, one browser, one day.

If you want to try it on a phone, the Text Studio is the one I ran, and the app guides cover what each app does.

I work on OnePassApps. Every reading above was taken in the live app today rather than recalled.

πŸ“° Read the original article on Dev.to WebDev

Originally published by Dev.to WebDev. Aggregated on AIWithGhost for educational purposes β€” full credit and traffic to the original publisher.