rikkster/npm-forced-original-scale

Displaying the page at a scale of 1: 1 despite scaling by the operating system

Forced original scale

About:

Is the site or web application displayed incorrectly due to scaling set by the operating system? This package will solve your problem. It doesn't matter what percentage your page scaling by system is - it will be displayed at the correct scale

RU: Описание на русском языке внизу страницы. Этот пакет поможет вашему сайту всегда отображаться в правильном масштабе.

How to use

Install the package: npm install forced-original-scale

Clean HTML+JS without WebPack:

Before using npm-package in a clean HTML+JS or PHP, you need to compile a bundle from it. It's very simple, follow the instructions:

1. Install browserify first: npm i -g browserify (in the console, the root folder of the project)
2. Create an "index.js" file in the root folder and write in it var originalScale = require('forced-original-scale');
3. Build bundle using browserify: browserify index.js > bundle.js (in the console, the root folder of the project)
4. In your index.html, before the closing "body" tag, add:

<script src="bundle.js"></script><script>document.addEventListener("DOMContentLoaded", function() { window.originalScale('container'); } );</script> where "container" is main container with all your pages, like <div id="container">...your html...</div> (you can name it whatever you want, as long but it want to be the id of the main component)

Using React:

1. Import the module into your App.jsx

import originalScale from 'forced-original-scale';

2. Call the module when the main component is ready

if you use hooks: useEffect(() => { originalScale('App'); }, [] );

if you use classes: componentDidMount() { originalScale('App'); };

where "App" is main container with all your pages, like <div id="App">.....</div> (you can name it whatever you want, as long but it want to be the id of the main component)

---

RU

О пакете:

Сайт или веб-приложение отображается неправильно из-за масштабирования, установленного операционной системой? Этот модуль решит вашу проблему. Неважно, какой процент масштабирования вашей страницы системой - он будет отображаться в правильном масштабе.

Как использовать

Установите пакет: npm install forced-original-scale

Чистый HTML+JS:

Чтобы использовать npm-модуль в чистом HTML+JS или PHP, вам необходимо собрать его при помощи browserify в бандл. Это очень просто, следуйте инструкции:

1. Сначала установите browserify: npm i -g browserify (в консоли, корневая папка проекта)
2. Создайте в корневой папке проекта файл index.js и напишите внутри него:
   var originalScale = require('forced-original-scale');
3. Выполните сборку при помощи browserify: browserify index.js > bundle.js (в консоли, корневая папка проекта)
4. Далее в вашем index.html перед закрывающимся тэгом body добавьте:

<script src="bundle.js"></script><script>document.addEventListener("DOMContentLoaded", function() { window.originalScale('container'); } );</script> где "container" это ID главного контейнера, в котором находится весь ваш HTML-код

Пример: <div id="container">...ваш html...</div> (вы можете назвать его как угодно, главное чтобы это был именно id контейнера внутри которого всё находится)

Используя React:

1. Добавьте в ваш App.jsx импорт модуля

import originalScale from 'forced-original-scale';

2. Вызовите модуль, когда главный компонент будет отрисован

Если вы используете хуки: useEffect(() => { originalScale('App'); }, [] );

Если вы предпочитаете классы: componentDidMount() { originalScale('App'); };

где "App" это ID главного контейнера, в котором находится всё ваше приложение.

Пример: <div id="App">.....</div> (вы можете назвать его как угодно, главное чтобы это был именно id контейнера внутри которого всё находится)