https://github.com/stereobooster/mobile-safari-fullscreen
Fix for Mobile Safari fullscreen issue
https://github.com/stereobooster/mobile-safari-fullscreen
Last synced: 2 months ago
JSON representation
Fix for Mobile Safari fullscreen issue
- Host: GitHub
- URL: https://github.com/stereobooster/mobile-safari-fullscreen
- Owner: stereobooster
- License: mit
- Created: 2018-06-21T18:12:55.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2018-06-21T18:58:28.000Z (almost 7 years ago)
- Last Synced: 2025-03-25T22:36:36.572Z (3 months ago)
- Language: JavaScript
- Size: 12.7 KB
- Stars: 23
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
mobile-safari-fullscreen
Fix for mobile Safari fullscreen issue
[![Build Status][build-badge]][build]
[![Code Coverage][coverage-badge]][coverage]
[![version][version-badge]][package]
[![downloads][downloads-badge]][npmtrends]
[![MIT License][license-badge]][license]
[](#contributors)
[![PRs Welcome][prs-badge]][prs]
[![Code of Conduct][coc-badge]][coc]
[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
[![Tweet][twitter-badge]][twitter]
## The problem
There is long standing bug in Mobile Safari https://bugs.webkit.org/show_bug.cgi?id=153852.
## This solution
This React component implements solution described in https://www.eventbrite.com/engineering/mobile-safari-why/ e.g. it always shows top and bottom bars in the Mobile Safari.
## Table of Contents
- [Installation](#installation)
- [Usage](#usage)
- [Inspiration](#inspiration)
- [Other Solutions](#other-solutions)
- [Contributors](#contributors)
- [LICENSE](#license)
## Installation
This module is distributed via [npm][npm] which is bundled with [node][node] and
should be installed as one of your project's `dependencies`:
```
npm install --save mobile-safari-fullscreen
```
## Usage
```js
import FullScreen from 'mobile-safari-fullscreen'
import styles from 'mobile-safari-fullscreen/index.module.css'
;
```
## Inspiration
https://www.eventbrite.com/engineering/mobile-safari-why/
## Other Solutions
I'm not aware of any, if you are please [make a pull request][prs] and add it
here!
## Contributors
Thanks goes to these people ([emoji key][emojis]):
| [
stereobooster](https://github.com/stereobooster)
[💻](https://github.com/stereobooster/mobile-safari-fullscreen/commits?author=stereobooster "Code") [📖](https://github.com/stereobooster/mobile-safari-fullscreen/commits?author=stereobooster "Documentation") [🚇](#infra-stereobooster "Infrastructure (Hosting, Build-Tools, etc)") [⚠️](https://github.com/stereobooster/mobile-safari-fullscreen/commits?author=stereobooster "Tests") |
| :---: |
This project follows the [all-contributors][all-contributors] specification.
Contributions of any kind welcome!
## LICENSE
MIT
[npm]: https://www.npmjs.com/
[node]: https://nodejs.org
[build-badge]: https://img.shields.io/travis/stereobooster/mobile-safari-fullscreen.svg?style=flat-square
[build]: https://travis-ci.org/stereobooster/mobile-safari-fullscreen
[coverage-badge]: https://img.shields.io/codecov/c/github/stereobooster/mobile-safari-fullscreen.svg?style=flat-square
[coverage]: https://codecov.io/github/stereobooster/mobile-safari-fullscreen
[version-badge]: https://img.shields.io/npm/v/mobile-safari-fullscreen.svg?style=flat-square
[package]: https://www.npmjs.com/package/mobile-safari-fullscreen
[downloads-badge]: https://img.shields.io/npm/dm/mobile-safari-fullscreen.svg?style=flat-square
[npmtrends]: http://www.npmtrends.com/mobile-safari-fullscreen
[license-badge]: https://img.shields.io/npm/l/mobile-safari-fullscreen.svg?style=flat-square
[license]: https://github.com/stereobooster/mobile-safari-fullscreen/blob/master/LICENSE
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[donate-badge]: https://img.shields.io/badge/$-support-green.svg?style=flat-square
[coc-badge]: https://img.shields.io/badge/code%20of-conduct-ff69b4.svg?style=flat-square
[coc]: https://github.com/stereobooster/mobile-safari-fullscreen/blob/master/other/CODE_OF_CONDUCT.md
[github-watch-badge]: https://img.shields.io/github/watchers/stereobooster/mobile-safari-fullscreen.svg?style=social
[github-watch]: https://github.com/stereobooster/mobile-safari-fullscreen/watchers
[github-star-badge]: https://img.shields.io/github/stars/stereobooster/mobile-safari-fullscreen.svg?style=social
[github-star]: https://github.com/stereobooster/mobile-safari-fullscreen/stargazers
[twitter]: https://twitter.com/intent/tweet?text=Check%20out%20mobile-safari-fullscreen%20by%20%40stereobooster%20https%3A%2F%2Fgithub.com%2Fstereobooster%2Fmobile-safari-fullscreen%20%F0%9F%91%8D
[twitter-badge]: https://img.shields.io/twitter/url/https/github.com/stereobooster/mobile-safari-fullscreen.svg?style=social
[emojis]: https://github.com/kentcdodds/all-contributors#emoji-key
[all-contributors]: https://github.com/stereobooster/all-contributors