0

How can I turn off the zoom function on our website, but for Android phones/devices only (but not affect iPhones)?

It might be fine if I just target the Chrome browser on Android, but also check to confirm the mobile screen size.

  • 1
    this is really bad practise. In fact, you're actually going against accessibility recommendations doing this (think of people with hard of sight) – jbutler483 Jan 20 '15 at 16:09
  • Yeah, I know it's not a good idea, but we have this form that's rendering differently on Androids vs. iPhones. –  Jan 20 '15 at 16:47
  • show us the 'form', and we'll see what we can do for you! – jbutler483 Jan 20 '15 at 16:50
  • Thanks! Sorry, it's pretty complicated because it has lot of layered bootstrap elements. But basically, it's a form that's aligned to the bottom of the screen. On Androids, when an input field is clicked, the keyboard pushes up the whole page so that you can no longer see the field you're typing in. The iOS keyboard apparently opens up on top of the page, and doesn't result in this issue. –  Jan 20 '15 at 16:56
  • why then, don't you add either a margin-bottom or padding-bottom to solve this issue? – jbutler483 Jan 20 '15 at 16:58
  • On iPhones (and desktops), the form works fine. It's also a collapsible form. I think adding margin or padding to the bottom will alter the iPhone layout. –  Jan 20 '15 at 17:13

2 Answers2

1

A meta tag you should use to turn zoom function off would be the next:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

You'll find more information reading the answers section of this StackOverflow question

Next thing you've got to do is to find out about user's operating system. The way to do so depends on server's programming language.

Ok, since you're using Ruby, you might need something like 

request.user_agent.include?("Android")

to get user's OS. But you've got to know this information is not guaranteed to be sent.

So, combining both elements we've got something like:

<% if  request.user_agent.include?("Android") %>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<% end %>
Community
  • 1
  • 1
MiGU
  • 382
  • 3
  • 17
  • Thanks. I'm using Ruby/Rails. I might be able to use JavaScript to get the browser and check if it's Chrome. How could I combine this with the meta tag? –  Jan 20 '15 at 16:52
0

Put this in the head of your html.

<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
Darkrum
  • 1,325
  • 1
  • 10
  • 27
  • Thanks. Would this affect iOS devices as well? –  Jan 20 '15 at 16:51
  • Yes it will effect all mobile devices. Think of it pretty much turning your website into a native app. – Darkrum Jan 20 '15 at 17:02
  • Is there a way to do this for only Android devices or mobile Chrome browsers? –  Jan 20 '15 at 17:09
  • You would need to use php or javascript to do this by getting the user agent and then using a if statement to implement the meta tag for said user. Unfortunately i don't know how to. But i wouldn't bother with that you should make your website render the same across all browsers/devices. less of a headache in the long run. – Darkrum Jan 20 '15 at 17:13
  • @Darkrum: [see this](http://davidwalsh.name/detect-android) for android detection – jbutler483 Jan 20 '15 at 17:17