Zooming and initial display with portrait orientation on iPad


(Peter N Lewis) #1

On an iPad, the zooming behaves oddly because the header bar zooms at a faster rate than the body, so you get into situations where the crucial right hand side of the navigation bar is off the page and impossible to access.

Worse still, on the iPad when it has never seen the site before, its default state is needlessly zoomed in somewhat, and the zooming causes the nav buttons to be cropped and inaccessible.

You can see a variant of this behaviour on the desktop if you zoom in. Because the navigation bar is fixed to the window, you get a case like this:

Note that that is fully scrolled to the right of the window, but the navigation controls are still further right and inaccessible.

As I say, on the iPad it is particularly bad as unless the user thinks to pinch zoom to reset the scale, they cannot sign in at all and will be thoroughly confused.

Thankfully, once you have pinch zoomed the screen, it behaves normally when zoomed to fit the iPad screen.

I tried to look at the CSS to figure out where things are going wrong, but I’m CSS positioning it beyond me at the moment.


Mobile viewport not being set correctly so things are "too small"
(Jeff Atwood) #2

I don’t think what you are saying here is true. Are you using the default iPad browser? In what orientation? Because whenever I visit a new Discourse instance I have never visited before in Mobile Safari in iOS 7, I never nave to do any special zooming.


(Peter N Lewis) #3

Its definitely true, because the only reason I found out was because a user complained to me that when they used the iPad to connect to our site (forum.keyboardmaestro.com) there was no way to sign in except to go into a message and try to reply.

So I checked on my iPad and found exactly the same thing.

Both orientations - in landscape you could just see the edge of the nav buttons.

It took me quite a while to try adjusting the zooming, and then once I scaled it to fit (which is how it should be by default) it all worked fine and Safari seems to remember the zoom as even quitting and relaunching Safari on the iPad remembered it.

But regardless of all that, try pinch zooming in on the page and you’ll see the problem immediately. Here is a screenshot from my iPad with the page slightly zoomed in and then scrolled all the way to the edge. You can just see the navigation button on the edge of the screen.

Resolving that will undoubtedly resolve the problem (though perhaps still leaving the site zoomed.

When my wife gets home, I’ll try it on her iPad (she has a retina mini, so quite different from my iPad 2).


(Dave McClure) #4

Are you able to reproduce the issue where things are zoomed initially here on meta or on try.discourse. org?


(Dave McClure) #6

Its definitely an issue when I zoom on a Nexus 5, but I haven’t seen a page load in some weird initial zoom state ever.


(Michael - DiscourseHosting.com) #7

This is my experience as well, both on iPhone and iPad, latest iOS, latest Safari.
I always have to pinch in order to get a complete view.

Initial:

After pinching - note the header:


(Jeff Atwood) #8

What about in landscape? Do you have to pinch on initial visit in landscape?


(Michael - DiscourseHosting.com) #9

No, that displays fine.

Please don’t tell me to use landscape :smile:


(Jeff Atwood) #10

No, on iPhone you’ll get mobile view unless you have opted out. No need to pinch there, this is incorrect.

So really this topic should be titled “Zooming and initial display on PORTRAIT iPad”. I’ll be editing.


(Peter N Lewis) #11

The initial problem was in both portrait and landscape, but yes, it seems the problem only happens if you start in portrait mode, or in landscape if you zoom in.

In Landscape, I could just see the edge of the navigation Sign In button logo.

In Portrait I could just see none of it.

I just tried it in the iOS Simulator, iPad 2. Here is meta in Portrait, as it first appears:

If I drag scroll it to the edge:

you can see the sign in buttons are not there.

I rotated it to the side, and it worked ok in landscape mode (zoomed itself correctly).


(Jeff Atwood) #12

Trust me, I use the hell out of iPad Air, there is zero issue with Discourse and iPad in landscape, which is mostly how I use the device anyway.

It’s actually kind of a crap device now that they moved to 64-bit and 1 GB RAM. You can have exactly one Discourse tab loaded, everything else will page out and do a full page reload every single time you switch tabs. It’s really, uh, delightful.


(Michael - DiscourseHosting.com) #13

You’re right, this is an old memory acting up…

Hm :smile: I use portrait… and I have to pinch all the time…


(Kris) #14

Seeing this behavior on the few iPads I tested too (iPad, iPad 2, and Mini on iOS 7.1). Changing

<meta name="viewport" content="width=device-width, initial-scale=1.0">

to

<meta name="viewport" content="width=device-width, user-scalable=yes, minimum-scale=0.75, maximum-scale=3.0" />

solves it on my end. Tested on Moto X, iPhone 4S, iPad, iPad 2, iPad mini.


(Jeff Atwood) #15