Mobile viewport not being set correctly so things are "too small"

(Dave McClure) #1

Continuing the discussion from Auto-hide persistent fixed header on scroll:

I couldn’t find another topic for this issue, and its currently one things that is making me hesitate to update our discourse instance to latest.

Reading on mobile is currently a bit of a PITA compared to how it worked before (we are on 807bfbd at the moment where things still look ‘normal’)

(Sam Saffron) #2

@awesomerobot I agree the current font is a touch small these days on an iPhone, it used to be a fair bit bigger.

(Dave McClure) #3

I agree the text is too small now, but just to make sure its not lost in the mix:

I’m finding the behavior on the Nexus 5 now where the magnifying class comes up when clicking the header logo to be particularly annoying.

(Kris) #4

Yeah, it looks like part of the problem I’m having is that setting meta viewport is really only needed for responsive sites, and Discourse isn’t really responsive enough in desktop/tablet view… so the device is setting the viewport width, and the layout just doesn’t adjust very well to meet it.

I’m guessing it worked better when a lot of our widths were set by percentages (not sure when/why that changed) - and we really need to get back to that if we want better support across devices.

Right now it looks like

<meta name="viewport" content="width=device-width, minimum-scale=.75, maximum-scale=2.0" />

works the best in the meantime… otherwise if I set the scale to 1.0 it works well on mobile but results in a zoomed-in default iPad view, which is just bad.

(Jeff Atwood) #5

Which widths are you referring to? There are a lot…

(Kris) #6

Actually, now looking back at some older versions it was never really that good… I thought the iPad zoom issue was new, but it seems like it’s been there for a while (I should use an iPad more).

The problem with the scale on the iPad right now is simply that the desktop layout doesn’t get narrow enough to properly fit the 768px width of the display in portrait mode, so to see the full width you’re actually viewing it at less than 1.0 scale… which is why I can’t fix the phone displays by setting the scale for all devices to 1.0

The layout can and should be more fluid in the areas where it makes sense. The bulk of the layout here is text… so, the topic-list titles, topic-post body/gutters… The topic-list does have a few basic breakpoints right now, but it really it should adjust up and down from mobile with fluidly somewhat similar to what The Boston Globe does. It’s a simple layout without many complications. There’d be no viewport questions at that point because in theory it would adjust to anything.

I’m going to take a look at the topic-list page tonight and actually get in functional there. It should be pretty simple (posts themselves are a bit trickier). I’ve put it off on my list for months now as an “enhancement” but I didn’t realize that there was some general broken-ness.

(Jeff Atwood) #7

It used to be great in landscape on iPad Air, now it is broken in landscape on iPad Air (giant margins on both sides). The “tradeoff” seems to be that portrait works better, but I hate portrait for web on the iPad …

(Kris) #8

Yeah, I’ll have something that will adjust the topic-list to both orientations properly tonight.

(Lowell Heddings) #9

The mobile experience has definitely degraded.

  • iPad Air in Landscape is reallllllly annoying. I keep trying to zoom but it always resets.
  • the fonts on my iPhone are way too small.
  • could be wrong but the buttons all feel too small now.

(Kris) #10

Started on the topic list, but ultimately had to work with some of the main content containers… which lead to working on the topic page, admin section… so right now just about everything scales somewhat gracefully between a portrait tablet resolution (768px wide) to a landscape/desktop view.

I need to do a bunch of testing tomorrow on my end before I push anything, but this will solve all the viewport issues on viewport widths 768px+ (all iPads, most tablets)… which means we can set meta viewport to 1.0 scale… which will then fix all the mobile scale issues…

(Sam Saffron) #11

Awesome work there !!

(Dave McClure) #12

I saw @awesomerobot’s changes were recently merged, but not seeing much difference here on meta. Not deployed yet?

(Sam Saffron) #13

Nope, will deploy soon, getting other stuff in place.

(Kris) #14

not on meta yet, you can check it out here though…

noticing a bug with the gutter width on topics (when there’s a long link) and a few more small things I can improve tomorrow.

update: now on meta

(Dave McClure) #15

Definitely a big improvement browsing on my phone!

(Kris) #16

ok - going to push a change that should fix the gutters and make topics a bit more flexible

(Dave McClure) #17

I feel like this ‘bug’ as reported could now be closed. The major regressions are fixed. We’re back on the tip of master…

Maybe a new or another existing topic to track ideas and progress for further ongoing improvements to the mobile experience?

(Jeff Atwood) #18