I've added "user-scalable=no" to the viewport meta tag in
bloodhound_theme.html. This disables the ability for users to zoom into or
out of Bloodhound pages on most mobile-type devices.

When trying Bloodhound on my phone more recently I found zooming to be an
anti-feature, which never actually helped me. The responsive layout already
displays information at the right size.

One noticeable speed benefit also comes from this: Normally mobile browsers
wait 300ms after a tap before they trigger a click event, because they're
waiting for a possible double tap (zoom). On Android and Chrome browsers
this wait is removed when "user-scalable=no" is set.

For iOS and many other types of devices and browsers that's not enough to
remove the delay. The Financial Times has published an MIT-licensed library
to 'fix' this:
http://labs.ft.com/articles/ft-fastclick/
https://github.com/ftlabs/fastclick

Should we include this library? I'm in favour of it because the increase in
improved responsiveness.

Cheers,
Joe

On 5 June 2013 17:01, <[email protected]> wrote:

> Author: jdreimann
> Date: Wed Jun  5 16:01:43 2013
> New Revision: 1489940
>
> URL: http://svn.apache.org/r1489940
> Log:
> Removes the ability for users to change the zoom into / out of pages on
> several mobile devices.
>
> Modified:
>
> bloodhound/trunk/bloodhound_theme/bhtheme/templates/bloodhound_theme.html
>
> Modified:
> bloodhound/trunk/bloodhound_theme/bhtheme/templates/bloodhound_theme.html
> URL:
> http://svn.apache.org/viewvc/bloodhound/trunk/bloodhound_theme/bhtheme/templates/bloodhound_theme.html?rev=1489940&r1=1489939&r2=1489940&view=diff
>
> ==============================================================================
> ---
> bloodhound/trunk/bloodhound_theme/bhtheme/templates/bloodhound_theme.html
> (original)
> +++
> bloodhound/trunk/bloodhound_theme/bhtheme/templates/bloodhound_theme.html
> Wed Jun  5 16:01:43 2013
> @@ -28,7 +28,7 @@
>    <py:match path="head" once="true"><head>
>      <link rel="stylesheet"
> href="${href.chrome('dashboard/css/bootstrap.css')}" type="text/css" />
>      <link rel="stylesheet"
> href="${href.chrome('dashboard/css/bootstrap-responsive.css')}"
> type="text/css" />
> -    <meta py:if="responsive_layout" name="viewport"
> content="width=device-width, initial-scale=1.0" />
> +    <meta py:if="responsive_layout" name="viewport"
> content="width=device-width, initial-scale=1.0, user-scalable=no" />
>      <title py:with="title = list(select('title/text()'))" py:choose="">
>        <py:when test="title">${title}</py:when>
>        <py:otherwise>${project.name or 'Apache(TM)
> Bloodhound'}</py:otherwise>
>
>
>


-- 
Joachim Dreimann | *User Experience Manager*

WANdisco // *Non-Stop Data*

e. [email protected]
twitter @jdreimann <https://twitter.com/jdreimann>

Reply via email to