Как узнать текущее масштабирование страницы?

@Diskyp · Регистрация: 01.01.2013

Студворк — интернет-сервис помощи студентам

День добрый, с синтаксисом js слабо знаком, потому прошу помочь.
Когда пользователь заходит на сайт/обновляет его мне нужно узнать, масштабирован ли у него в браузере мой сайт или нет.
Нужно это для моей системы автоподгонки резиновой вёрстки под размер окна юзера, когда он заходит на сайт. Система эта сделана, да вот если пользователь масштабирует страницу и после этого перезаходит на/обновляет страницу, то размер сайта подгоняется, а окаянный шрифт остаётся слишком большим или маленьким, портя всё.
Потому я хочу сделать так, чтобы сайт подгонялся только при 100% масштабе ну или чтобы шрифт изменялся пропорционально масштабу.
В интернетах наткнулся на вроде бы нужный мне код:

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
function getScale(){ 
    var ct = document.createElement("div"); // создаем див
    ct.style.position = "fixed"; // задаем отображение от вьюпорта
    ct.style.margin = "0px"; // на всякий случай
    ct.style.width = "100%"; // ширина дива&nbsp;— ширина вьюпорта
    var sb = document.documentElement.style.overflow; // сохраняем старое значение overflow
    document.body.appendChild(ct); // вставляем в документ
    document.documentElement.style.overflow = "hidden"; // это значение действует на самом деле не на <html>, а на ICB, равный по ширине вьюпорту
    var zoomRatio = window.innerWidth / ct.clientWidth; // делим ширину окна на ширину вьюпорта 
    document.documentElement.style.overflow = sb; // возвращаем стиль на место
    document.body.removeChild(ct); // удаляем див
    return zoomRatio;
} 
alert("Масштаб:" + Math.round(getScale() * 100) + "%");

Может этот код когда-то и где-то работал, но сейчас он мне на выходе выдаёт NaN.

Ещё как вариант чтобы масштаб в самом браузере при .ready менялся на 100%, но это, наверное, совсем из ряда фантастики.

@Padimanskas · 20.11.2015, 12:20

Diskyp,
Попробуй такой вариант. В Хроме работает, в остальных не смотрел.

JavaScript
1
2
3
4
window.defaultWidth = window.innerWidth;
window.onresize = function () {
    console.log((window.defaultWidth / window.innerWidth).toFixed(2) * 100);
};

@Diskyp · 20.11.2015, 16:58 **[ТС]**

Сообщение от Padimanskas

Diskyp,
Попробуй такой вариант. В Хроме работает, в остальных не смотрел.

Проблема в том, что изначально пользователь может обновить страницу с каким угодно масштабом и в этом коде он будет считаться за 100%, хотя это не так. Потому при попадании юзера на страницу мне нужно как-то определить с каким масштабом в браузере он зашёл, дальнейшее слежение за его изменением мне не нужно.

@Glart · 20.11.2015, 17:02

Не уверен, но может поможет em:

CSS
1
font-size:1.1em;

@Diskyp · 20.11.2015, 18:31 **[ТС]**

Сообщение от Glart

Не уверен, но может поможет em:

Каким образом он поможет? Вы, наверное, не поняли сути вопроса.

@Padimanskas · 20.11.2015, 19:55

Сообщение от Diskyp

с каким масштабом в браузере он зашёл, дальнейшее слежение за его изменением мне не нужно.

JavaScript
1
2
3
4
window.onload = function(){
    alert(window.screen.availWidth- (window.screen.availWidth - window.innerWidth));
    alert(window.screen.availHeight - (window.screen.availHeight - window.innerHeight));
};

@Glart · 20.11.2015, 19:57

Сообщение от Diskyp

а окаянный шрифт остаётся слишком большим или маленьким

Сообщение от Diskyp

Каким образом он поможет?

Ну как бы вот.

@Diskyp · 20.11.2015, 20:17 **[ТС]**

Сообщение от Padimanskas

JavaScript
1
2
3
4
window.onload = function(){
 alert(window.screen.availWidth- (window.screen.availWidth - window.innerWidth));
 alert(window.screen.availHeight - (window.screen.availHeight - window.innerHeight));
};

Этот код просто определил размеры вьюпорта, но это мне не поможет, т.к. юзер, к примеру, может иметь окно браузера 800х600, а может уменьшить масштаб в браузере с окна в 1920х1680 до 800х600 и во втором случае сайт подстроится под новое разрешение (уменьшится основной контейнер и шрифт), но при этом шрифт уменьшит ещё в довесок и сам браузер и он станет крошечным, а мне надо, чтобы в обеих случаях сайт смотрелся одинаково.

Добавлено через 7 минут

Сообщение от Glart

Ну как бы вот.

Изменение шрифта в процентах происходит от значения его родителя или по дефолту 16px и, насколько я знаю,невозможно сделать чтобы шрифт корректировался относительно размера блочного элемента-родителя. И темболее этого не умеют делать величины измерения кроме vh и vw, но они статичны и работают относительно размера вьюпорта, что портит весь мой замысел.

@Padimanskas · 20.11.2015, 22:52

Сообщение от Diskyp

Этот код просто определил размеры вьюпорта, но это мне не поможет, т.к. юзер, к примеру, может иметь окно браузера 800х600, а может уменьшить масштаб в браузере с окна в 1920х1680 до 800х600 и во втором случае сайт подстроится под новое разрешение (уменьшится основной контейнер и шрифт), но при этом шрифт уменьшит ещё в довесок и сам браузер и он станет крошечным, а мне надо, чтобы в обеих случаях сайт смотрелся одинаково.

У тебя уже есть набор событий onresize, onload, а так же свойства хранящие внутренние, относительные, общие и реальные размеры. Этими данными можно измерить все вдоль и поперек и в любое время работы браузера. Ну а если ты тупо верстальщик и слегка не знаешь как делается адаптивный шаблон, то время идти в раздел "верстальщик" и не впаривать тут никому свои дилетантские выводы. Надеюсь доходчиво

@Diskyp · 21.11.2015, 06:15 **[ТС]**

Сообщение от Padimanskas

У тебя уже есть набор событий onresize, onload, а так же свойства хранящие внутренние, относительные, общие и реальные размеры. Этими данными можно измерить все вдоль и поперек и в любое время работы браузера. Ну а если ты тупо верстальщик и слегка не знаешь как делается адаптивный шаблон, то время идти в раздел "верстальщик" и не впаривать тут никому свои дилетантские выводы. Надеюсь доходчиво

Ты понимаешь, что при масштабировании изменяется размер окна браузера? Вот у меня при 100% масштаба окно 800х600, а при 150% 1200х900 И ПРИ ЛЮБЫХ ТВОИХ ИЗМЕРЕНИЯХ мне выдаётся ТЕКУЩИЙ РАЗМЕР окна браузера с учётом масштаба.
Мне нужно узнать размер окна браузера с событием .ready (при загрузке страницы), каким бы он был при 100% масштаба, независимо от того, как юзер замасштабировал сайт ранее или же узнать текущее значение масштабирования страницы.
Я просто не знаю синтаксиса js и думал мне подскажут нужную функцию типа .getScale() или что-то подобное, что определяет значение масштаба в браузере.
И я тебе совершенно осознанно говорю, что ты говоришь мне совсем не то, что нужно. Либо пытайся лучше вникнуть в мой вопрос, либо иди лесом и не впаривай тут мне свои дилетантские выводы.
Надеюсь доходчиво.

@kalabuni · 21.11.2015, 11:14

Сообщение от Diskyp

Либо пытайся лучше вникнуть в мой вопрос, либо иди лесом и не впаривай тут мне свои дилетантские выводы.

а вы, в свою очередь, попытайтесь представить себя диктором центрального телевидения, который в программе "Время" озвучивает для населения очередной официальный бред нашего правительства типа "какой молодец наш нацик-лидер Путин, и какие ужасные чмошники все эти Обамы и прочие гейропейцы".
вы очень умело и профессионально модулируете своими голосом и интонацией, в нужные моменты повышаете громкость произносимых вами фраз почти до крика, а в других случаях понижаете голос почти до шёпота.
по окончании вашей речи все присутствующие в телестудии ваши коллеги аж "заходятся" в рукоплесканиях и криках "браво" в ваш адрес.

а через полчаса после окончания программы "Время" в телестудию поступает результат телефонного блиц-опроса телезрителей, из которого выясняется, что из 100 случайно опрошенных телезрителей, смотревших в этот вечер телевизор, целых 60 человек не слышали ни единого вашего слова и не запомнили ни единой фразы из всех вами произнесённых.
вы негодуете - как же так?? вы же так старались?!
вы не верите этим результатам и требуете разъяснений от "службы опросов" Останкино
и таковые разъяснения получаете:
во-первых, 40 опрошенных в этот вечер смотрели не Первый телеканал, а какой-то другой
во-вторых, у 15-ти человек громкость телевизоров была уменьшена до минимума, потому что "программа выходит поздно и дети уже спят" и потому они ничего не расслышали
в третьих, 5 человек из опрошенных случайно оказались вашими соседями по подъезду, которые лично вас ненавидят за ваше высокомерие, за то, что вы не здороваетесь с ними, когда встречаетесь на лестничной площадке, в лифте или у подъезда, и потому они всякий раз вообще отключают звук своих телевизоров, когда слышат ваш голос.
вот так вот -- при всём вашем ораторском искусстве вы никак не можете контролировать внешнее (по отношению к телевизору) поведение телезрителей.

изменение масштаба выбором соответствующих пунктов меню браузера или нажатием кнопок Ctrl + + (или Ctrl + -) на клавиатуре -- это такое же внешнее поведение браузеро-пользователей (по отношению к браузеру) и авторы интернет-страниц также никак не могут его контролировать

такие дела
постарайтесь более не разбрасываться своими глупыми упрёками в дилетантизме в адрес моих уважаемых коллег

@Padimanskas · 21.11.2015, 13:36

kalabuni,

@kalabuni · 21.11.2015, 13:36

Padimanskas, насчёт "уважаемого" я, походу, погорячился
мне надо было использовать другое прилагательное

@Padimanskas · 21.11.2015, 13:44

Короче, все работает и Ctrl + + (или Ctrl + -) в т.ч. смотрим, пробуем в консоли
сперва сохраняем window.innerWidth

JavaScript
1
2
3
4
window.onclick=function(){
    alert(window.screen.availWidth- (window.screen.availWidth - window.innerWidth));
    alert(window.screen.availHeight - (window.screen.availHeight - window.innerHeight));
};

или/и

JavaScript
1
window.onresize=function(){...};

Добавлено через 1 минуту

Сообщение от kalabuni

насчёт "уважаемого" я, походу, погорячился
мне надо было использовать другое прилагательное

я слегка перепутал, сорри мен ^-^

@Diskyp · 21.11.2015, 19:25 **[ТС]**

Сообщение от kalabuni

постарайтесь более не разбрасываться своими глупыми упрёками в дилетантизме в адрес моих уважаемых коллег

А то, что точно такой же упрёк выдвинули в мой адрес постом выше, а я просто спарировал естественно неважно, ведь кому есть дело до очередного Васи Пупкина из интернетов с нулевым рейтингом.

Сообщение от Padimanskas

Короче, все работает и Ctrl + + (или Ctrl + -) в т.ч. смотрим, пробуем в консоли
сперва сохраняем window.innerWidth

Я ещё раз говорю, это совершенно не то, что нужно. При масштабе в 100% мне выдаст 800х600, при масштабе 150% мне выдаст 1200х900. Мне же нужно, чтобы при любом масштабе выдавало 800х600, тоесть "истинное" значение окна браузера, без его модификации масштабом.
Перестань настаивать на своей глупости и

Сообщение от Diskyp

Либо пытайся лучше вникнуть в мой вопрос, либо иди лесом и не впаривай тут мне свои дилетантские выводы.

Проблема всё ещё в силе, ищу варианты её решения.

Добавлено через 15 минут
Кстати заметил одну интересную вещь, что при "исследовании элемента" в браузере у элементов, имеющих 100% ширину и высоту, пиксельные размеры при масштабировании не изменяются, тоесть в этом самом инспекторе всегда показывается первоначальный размер у таких элементов, в частности у html. При этом если замерить размер окна браузера с помощью js, то мне выдаст модифицированный масштабом размер. Долго и упорно пытался эти цифры как-то вытащить с помощью js, но всё не получалось, можно ли как-то узнать размер html?

@Padimanskas · 23.11.2015, 10:08

Diskyp,

Не по теме:

Лопату тебе в руки и на завод D

Новые блоги и статьи Все статьи Все блоги /
Настройки VS Code Loafer 13.04.2026 { "cmake. configureOnOpen": false, "diffEditor. ignoreTrimWhitespace": true, "editor. guides. bracketPairs": "active", "extensions. ignoreRecommendations": true, . . .	Оптимизация кода на разграничение прав доступа к элементам формы Maks 13.04.2026 Алгоритм из решения ниже реализован на нетиповом документе, разработанного в конфигурации КА2. Задачи, как таковой, поставлено не было, проделанное ниже исключительно моя инициатива. Было так:. . .	Контроль заполнения и очистка дат в зависимости от значения перечислений Maks 12.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: реализовать контроль корректности заполнения дат назначения. . .	Архитектура слоя интернета для сервера-слоя. Hrethgir 11.04.2026 В продолжение https:/ / www. cyberforum. ru/ blogs/ 223907/ 10860. html Знаешь что я подумал? Раз мы все источники пишем в голове ветки, то ничего не мешает добавить в голову такой источник, который сам. . .
Подстановка значения реквизита справочника в табличную часть документа Maks 10.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеПерсонала", разработанного в конфигурации КА2. Задача: при выборе сотрудника (справочник Сотрудники) в ТЧ документа. . .	Очистка реквизитов документа при копировании Maks 09.04.2026 Алгоритм из решения ниже применим как для типовых, так и для нетиповых документов на самых различных конфигурациях. Задача: при копировании документа очищать определенные реквизиты и табличную. . .	модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	21.11.2015, 13:36
	kalabuni, 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	21.11.2015, 13:36
	Padimanskas, насчёт "уважаемого" я, походу, погорячился мне надо было использовать другое прилагательное 0

@Padimanskas Superposition 950 / 615 / 256 Регистрация: 27.10.2013 Сообщений: 2,083
	23.11.2015, 10:08
	Diskyp, Не по теме: Лопату тебе в руки и на завод D 0