Re: Jonathan's concern: Zoom in responsive drops content

On 08/07/2016 09:02, Alastair Campbell wrote:
> I think there is a little cross-purpose talking going on, the key one
> being here:
>
> Jason wrote: I may be mistaken, but I understand the scenario under
> discussion here to be one in which the same content with the viewport
> size and orientation settings is served to all user agents. Mobile
> devices will tend to honor the settings, but desktop systems won’t.
> Please correct me if these are the wrong assumptions.
>
> AC: Other way around. The scenario is that the author has created a
> responsive site which works great on desktop. People can zoom, and
> the media queries re-flow the content down to what you might consider
> a mobile view. The SC as written matches this well.
>
> On small-screen devices, due to the way they fix the layout onload,
> there is no mechanism* to zoom without causing bi-directional
> scrolling. I.e. you pinch zoom and the layout expands without
> re-flowing, so it works like a magnifier rather than the desktop
> style re-flow.
>
> I wrote up the differences here (with videos to show it visually if
> you can see it):
> https://alastairc.ac/2015/10/zoom-for-fixed-and-responsive-sites/
>
> The problem for the SC is that small-screen UAs do not provide a
> means to increase text size with re-flow, so there will always be
> horizontal scrolling.

I wonder if this is more of a User Agent issue (or rather, something 
that needs to be flagged to UA developers). Old versions of Opera Mini 
and Opera Mobile had a "text wrap" and "single column" setting which 
forced this sort of behavior, from what I remember. 
http://www.opera.com/blogs/mobile/2014/08/opera-mini-ios-text-wrap-zoom-options/

But yes, the current behavior on mobile (that when you pinch-zoom it 
doesn't reflow the content, but instead forces bidirectional zoom) is 
the default behavior that works best for the majority of users (without 
specific access requirements) right now, so unlikely to get changed by 
default.

> -Alastair
>
> * Some provide a text-sizing preference in the settings, but it is
> rather hit and miss. On iOS for example it doesn’t apply to web
> content. On others it often leads to the text-overlapping issues you
> got with text-only resize on desktop.

There are tricks to make this work for iOS, but they're iOS specific 
(essentially, using/defining the use of the Apple system font in your 
CSS https://webkit.org/blog/3709/using-the-system-font-in-web-content/ 
which then, even for web content, respects the text size defined in the 
iOS system-wide settings). As they're so proprietary and specific, 
expect this not to be common on the "open web" (though more likely to be 
used for app-like web apps, and - though I can't confirm if it works or 
not - hybrid apps using a wrapped web view).

P
-- 
Patrick H. Lauke

www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke

Received on Friday, 8 July 2016 08:20:22 UTC