Web app to estimate device's pixel ratio and calculate the logical resolution(viewport).
React app for calculating the logical resolution also known as viewport, based on the physical resolution and the pixel ratio of the device.
- JS Libraries: ReactJS
- Programming Language: TypeScript
- CSS Libraries: TailwindCSS
- Build Tool: Vite
- Hosting: GitHub Pages
- Dev Environment: VSCode with dev containers in Zorin OS
You can see the demo here: https://jhordyess.github.io/viewport-calculator/
- Clone the repository:
git clone [email protected]:jhordyess/viewport-calculator.git- Open the project folder:
cd viewport-calculator- Install the dependencies:
yarn- Run the project:
yarn dev- Open the browser at http://localhost:5173/viewport-calculator/
You can use the VSCode dev containers to run the project in a containerized environment.
You need to have installed Docker and VSCode, and the Dev Containers extension.
- Clone the repository:
git clone [email protected]:jhordyess/viewport-calculator.git- Open the project with VSCode:
code viewport-calculator-
Open the command palette and select the option
Dev Containers: Reopen in Container. -
Wait for the container to be built and the project to be started.
-
Open the terminal in VSCode and run the project:
yarn dev- Open the browser at http://localhost:5173/viewport-calculator/
If you would like to contribute to the project, open an issue or make a pull request on the repository.
© 2023> Jhordyess. Under the MIT license. See the LICENSE file for more details.
Made with 💪 by Jhordyess