Page MenuHomePhabricator

Refreshed is zoomable on mobile, which allows the user interface to break
Closed, InvalidPublic

Description

When you zoom in with the Refreshed skin on mobile (or screen with a small resolution), the UI breaks up - here's a screenshot of this. This should preferably be disabled.

https://drive.google.com/file/d/0B3VFSxT9OqugY0NhZVh3OGM1d1dUeC16QTFGSFBZa0lGVGg0/view?usp=sharing

This can be fixed with a simple <meta> viewport (read more at https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag) :)

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0" >

Event Timeline

SamanthaNguyen moved this task from Backlog to Bugs on the Refreshed board.
SamanthaNguyen moved this task from Backlog to Refreshed on the Brickimedia board.

@SamanthaNguyen Did you test this? I fiddled around with the viewport stuff a bit via Firefox's developer tools, responsive design mode and using CTRL and the plus key to zoom in and from what I could see, there was no difference between the viewport settings you're suggesting here vs. what Refreshed currently implements (which is width=device-width, initial-scale=1.0 and, according to the accompanying code comment, needed for iOS), but then again I didn't use a real mobile device to conduct the tests.

Well if you're asking whether or not I actually tested if the bug happens on iOS then yeah, I did (see Google Drive-supplied link for screenshot). If I actually tested the <meta> code then I'll be honest, I didn't because I assumed the viewport was actually different from the one that was written in the report above (my fault, sorry!)

I can't use the web inspector on iOS Safari because it requires using a cable connecting from the iOS device to a Mac OS device (which I don't have).

@MtMNC can you test this whenever you get time?

SamanthaNguyen closed this task as Invalid.Dec 21 2016, 9:55 PM

Alright, thanks for the notice :)

I'll mark this as INVALID (someone can re-open this if they figure out a workaround).