---
title: How to Prevent Page Zoom When Tapping Forms in Mobile
description: >-
  By default, all mobile browsers force the form element to work as it is. But when a developer sets
  the font size less than 16 pixels.
url: https://expiredqueues.com/stop-zoom-in-on-input-focus-on-mobile-devices/
date: '2018-06-02T10:54:18.000Z'
image: https://expiredqueues.com/images/og/stop-zoom-in-on-input-focus-on-mobile-devices-08059923.jpg
---

Written in June 2018. Details may have aged; read with the date in mind.

CSS posts mobile

# How to stop zoom in on input focus on mobile devices

2 June 2018 By Adrian 2 min read

It has been almost a year since Safari (starting from iOS 10) [disabled web developers' ability to prevent user zoom](https://expiredqueues.com/answers-i-went-back-to-fix/).

We normally take the viewport meta for granted.

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

> This was a bulletproof solution to make our mobile responsive pages look the same in all mobile browsers while we ignored that many users struggled to read our hand-picked crafted fonts and our 4K display supported font size.

We had one more problem. When users tap in any form fields – the webpage zooms in automatically.

## Problem

![](https://expiredqueues.com/images/2019/mobile-zoom-demo.gif)

Now I know for the fact that – allowing this feature to stay unchanged is recommended – sometimes we do need to honour the client request and sometimes this zoom creates unwanted bugs in the UI.

For example – a date picker input – if zoomed in mobile – would most likely break the UI.

Continue reading below for the fix.

## How To Fix

By default, all mobile browsers force the form element to work as it is. But when a developer sets the font size less than 16 pixels on any form element – mobile browsers intervene and force the UI or Page to zoom so that the texts are readable enough.

You guessed it, the solution.

### Apply below

```css
@media screen and (max-width: 767px) {
  input, select, textarea {
    font-size: 16px;
  }
}
```

Please note, you can set any value for the `max-width` property as per your style guide or UI design.

Same, the `font-size: 16px` might be overridden by other higher specificity rules, like other classes, selectors etc.

It’s a good idea to use `!important` just in this case. You are restraining the selector only for mobile, that means it won’t break your other UIs.

[Previously Git commands I wish I knew early](https://expiredqueues.com/git-commands-i-wish-i-knew-early/) [Next Top ReactJS Tools of Feb 2019](https://expiredqueues.com/top-reactjs-tools-feb-2019/)

## Structured data

```json
{
  "@context": "https://schema.org",
  "@type": "BlogPosting",
  "headline": "How to stop zoom in on input focus on mobile devices",
  "datePublished": "2018-06-02T10:54:18.000Z",
  "dateModified": "2018-06-02T10:54:18.000Z",
  "author": {
    "@type": "Person",
    "name": "Adrian",
    "url": "https://expiredqueues.com/about/"
  },
  "publisher": {
    "@type": "Person",
    "name": "Adrian"
  },
  "mainEntityOfPage": "https://expiredqueues.com/stop-zoom-in-on-input-focus-on-mobile-devices/",
  "image": "https://expiredqueues.com/images/2019/mobile-zoom-demo.gif",
  "keywords": "posts, mobile, responsive, tips-tricks",
  "articleSection": "CSS"
}
```