https://github.com/niksy/prevent-ios-focus-zoom

[DEPRECATED] Prevent form elements from zooming when focused on iOS.
https://github.com/niksy/prevent-ios-focus-zoom

Last synced: about 2 months ago
JSON representation

[DEPRECATED] Prevent form elements from zooming when focused on iOS.

• Host: GitHub
• URL: https://github.com/niksy/prevent-ios-focus-zoom
• Owner: niksy
• Created: 2014-01-19T14:42:56.000Z (almost 11 years ago)
• Default Branch: master
• Last Pushed: 2016-11-20T07:31:56.000Z (about 8 years ago)
• Last Synced: 2024-10-18T04:10:35.716Z (2 months ago)
• Language: JavaScript
• Homepage:
• Size: 14.6 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
![Deprecated project](https://img.shields.io/badge/status-deprecated-red.svg)

**This project is deprecated.**

[Apple removed ability to prevent zoom in recent iOS versions](https://mobile.twitter.com/thomasfuchs/status/742531231007559680/photo/1), so changes applied with this module no longer work.

There are several approaches to adjust to this behavior:

* Increase form element font size. This is self-explanatory—your users will definitely have benefits from that. If your design doesn’t allow that, talk to your designers. iOS default font size is there for a reason.

* If you can’t increase font size, you can set it to normal value only on iOS 9+ Safari with this CSS code:

```css

@supports (font:-apple-system-body) and (-webkit-touch-callout:none) and (-webkit-tap-highlight-color:hotpink) {

	input, textarea {

		font-size: initial;

	}

}

```

This "hack" is not guaranteed to work in the future so beware.

---

# prevent-ios-focus-zoom

iOS zooms on form element focus. This script prevents that behavior.

Original script by [@zachleat](https://github.com/zachleat) ([Gistfile](https://gist.github.com/zachleat/2008932)).

## Installation

```sh

bower install niksy/prevent-ios-focus-zoom

```

## API

### `Element.preventFocusZoom([destroy])`

Returns: `jQuery`

#### destroy

Destroy plugin instance.

## Examples

Run on default form elements.

```javascript

$('input:text, select, textarea').preventFocusZoom();

```

Destroy plugin instance.

```javascript

$('input:text, select, textarea').preventFocusZoom('destroy');

```

## Browsers

Tested in IE8+ and all modern browsers.

## License

[Zach Leatherman](http://www.zachleat.com/web/)

Transfered to proper repo by [Ivan Nikolić](http://ivannikolic.com).