Skip to content

clean up README.md #2

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
jlecordier wants to merge 1 commit into
base: main
Choose a base branch
from
Open

clean up README.md #2

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ A Work Around for mimicking Safari's viewport-fit: cover on Chrome, which extend

<p> ---------------------------------------- </p>

Application written in Typescript, within a [Three.Js](https://threejs.org/) enviornment to generate HTML Canvas.
Application written in Typescript, within a [Three.Js](https://threejs.org/) environment to generate HTML Canvas.

## Creator Message

Expand All @@ -32,9 +32,9 @@ Application written in Typescript, within a [Three.Js](https://threejs.org/) env
In simple terms, my approach to extending the web page past the iPhone notch is to zoom on the page, and scroll to the middle.

Details with my function names and numbers:
- Include event listener for window resizing, which triggers a function (onWindowResize) to determine if window is mobile and landscape (checkLandscape)
- Include event listener for window resizing, which triggers a function (`onWindowResize`) to determine if window is mobile and landscape (`checkLandscape`)
- Declare a zoom value with desired number, I chose 1.5
- If mobile and landscape, zoom page with css property `zoom`, or in my case, multiply the htmlCanvas size width and height by determined zoom amount
- If mobile and landscape, zoom page with css property `zoom`, or in my case, multiply the `htmlCanvas` size width and height by determined zoom amount
- If document includes `overflow: hidden` styling, it must be "unlocked" momentarily with `overflow: visible`
- Declare `middleX` with a value to equal `innerWidth * zoom / 6`
- Delare `middleY` with a value value to equal `innerHieght * zoom / 6`
Expand All @@ -43,7 +43,7 @@ Details with my function names and numbers:

## Usage

To view a working demo of the soltion, simply visit [chromeios-viewportfitcover](https://anthonypena97.github.io/chromeios-viewportfitcover/)
To view a working demo of the solution, simply visit [chromeios-viewportfitcover](https://anthonypena97.github.io/chromeios-viewportfitcover/).
The blue is the HTMLCanvas and red is the HTML Document with a background color of red.

## Installation
Expand All @@ -52,16 +52,16 @@ To work with code:

- download, fork, or clone repository
- open terminal in application root directory
- enter,`npm i`
- analyze client.ts and index.html
- enter, `npm i`
- analyze `client.ts` and `index.html`
- enter, `npm run dev` for development
- enter, `npm run build` once complete
- copy new bundle.js, index.html, and any public assets from dist/client/ folder
- copy new `bundle.js`, `index.html`, and any public assets from `dist/client/` folder
- use copied files for deployment

## Notes

This application has been tested through and written for Chrome v.97, Safari v.14, iOS v.14, Safari iOs, Chrome iOs, and Instagram. This application is responsive to both Desktop and Mobile use cases.
This application has been tested through and written for Chrome v.97, Safari v.14, iOS v.14, Safari iOS, Chrome iOS, and Instagram. This application is responsive to both Desktop and Mobile use cases.

## License

Expand Down