Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How can I enable zoom on Android?

That's right, I want to enable zooming rather than disabling it.

I have created a responsive website and all is looking good. However for some reason you can't pinch-zoom in Chrome on a Nexus 7 (running Android 4.2.2).

This is my meta tag that makes sure it shows the site with the right CSS for the screen size:

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

Nowhere here do I say the user can't zoom. As I say, the site is responsive so there is no reason for the user to need to zoom, however if a user wants to zoom I don't want to stop them. There is no problem on the iPhone, the user can zoom if they want to. But on Android they can't. I have tried adding user-scalable=yes and user-scalable=1 but this makes no difference.

The only thing that works is removing that meta tag but then the site renders itself as if it's being displayed on a large screen so it is no longer responsive.

Is there anything I can do?

like image 450
punkrockbuddyholly Avatar asked Aug 16 '13 13:08

punkrockbuddyholly


2 Answers

@David Lee's comment on top is correct: It seems more of a Nexus 7 thing than a Chrome problem. Google has had a lot of complaints regarding pinch-to-zoom wrt Nexus 7 and there is speculation that they are trying to work around Apple's pinch to zoom patent.

From what I know just using

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

should work.

I've looked at http://m.skyscanner.com/ as an example and it works on other devices with chrome and other browsers like Dolphin HD. And all that site has is the viewport code from above.

Chrome for Android has a way for us to force zoom - Open up the browser's main settings and tap "Accessibility," then check the option called Force enable zoom and see if this works in Nexus 7(I dont have that device so cant test it)

like image 194
Vrashabh Irde Avatar answered Oct 13 '22 00:10

Vrashabh Irde


What version of Android? Android 2.2 doesn't support the viewport meta-tag, if your version is between 2.3.x and 4.x try this:

<meta name="viewport" content="initial-scale=1.0, width=device-width, user-scalable=yes" />

Hope this helps.

like image 37
David Lee Avatar answered Oct 12 '22 23:10

David Lee