Особенности программирования сайтов на языке javascript

Эта информация возможно устарела, я еще не проверял. Написано в 2018 году. Но пусть пока будет.

Сложность программирования сайтов на языке javascript состоит в том, что существует много интерпретаторов этого языка, то есть браузеров, каждый из которых все время меняется, и все они отличаются не только внешним видом, но и функциональностью. Есть несколько проблем, которые решаются разными способами.

1 проблема -- масштабирование.

Каждый современный браузер умеет масштабировать изображения, которые он показывает. Раньше это выполнялось при нажатии клавиш [Ctrl]+[+] (увеличить картинку на экране) и [Ctrl]+[--] (уменьшить картинку на экране). В первом случае эффективное разрешение картинки (например, число пикселей на ширину экрана) понижается, а во втором увеличивается. Сейчас то же самое можно сделать с помощью мыши по кнопкам в настройках. Это необходимо для компьютеров без клавиатуры, то есть планшетов и смартфонов.

Правильно за 100% масштаб принимать реальное разрешение экрана конкретного прибора. Тогда получается полное соответствие пикселей браузера и прибора. Так сделано в браузерах Интернет Эксплорер (ИЭ) и Firefox (Ф). Но в браузерах Гугл Хром (Х), Яндекс (Я) и Опера-12 (О) сделано иначе. При этом, в правильных браузерах (например, ИЭ) переменные screen.width (SW) и screen.height (SH) показывают реальные размеры экрана, деленные на масштаб (М), а переменная devicePixelRatio (dPR) показывает (М). То есть браузер показывает масштаб и всегда можно вычислить реальные размеры экрана. Соответственно легко перемасштабировать картинки таким образом, чтобы они при любом масштабе одинаково заполняли экран.

От масштаба будут зависеть только тексты и размеры кнопок. Но и это тоже можно масштабировать, если есть необходимость. Такая необходимость может появиться, если вы задумали сайт с жестким и точным расположением всех элементов страницы независимо от масштаба. Конечно, вполне достаточно сделать так для какого-то масштаба, и просить пользователя выставлять именно этот масштаб. Но пользователи вряд ли согласятся.

В неправильных браузерах (например, Я) ситуация иная. Переменные SW и SH показывают стандартные значения 1280 и 720 независимо от (М), а переменная dPR показывает отношение реальной ширины экрана к числу 1280, деленному на (М). То есть, если ширина экрана равна 1600, то dPR равно 1 при (М)=80%. При этом невозможно определить ни реальные размеры экрана, ни масштаб. Просто по той причине, что две первые переменные вообще ничего не показывают, а третья не может показать сразу два параметра. Нужно как-то узнавать независимо либо (М), либо реальные размеры экрана.

Соотвественно, для получения точного совпадения пикселей картинки и пикселей экрана есть такой способ. Запускать программу при (М)=100% и устанавливать в программе ширину экрана, равную произведению SW на dPR. Затем просить пользователя выбирать масштаб из условия, чтобы картинка помещалась на весь экран, например, по высоте. Правильный масштаб будет равен 1/dPR. Можно поступать и наоборот. Масштабировать все на гипотетическую ширину экрана 1280, а потом просить пользователя выставлять масштаб 100%. Просить приходится потому, что реально, например лично я, работаю постоянно в таком масштабе, который обеспечивает совпадения пикселей картинки и пикселей экрана, например, (М)=80% при ширине экрана 1600.

Проблема еще и в том, что при одном и том же размере, например, кнопок в пикселах, и одном и том же масштабе, реальный размер кнопок на экране будет разный. Все будет одинаково только если ориентироваться на реальные размеры экрана. И программа все равно будет давать разный вид сайта в разных браузерах. Чтобы было одинаково необходимо все размеры элементов вычислять из реальных размеров экрана. Я напомню, что речь идет о сайте, который полностью создается на языке javascript, то есть html и css не используется.

Интересно, что есть возможность даже масштабирование делать на языке javascript. Это выполняет вот такой код
aa = document.getElementsByTagName('html'); aa[0].style.transform = "scale(1.25,1.25)";
Такая форма увеличивает картинку сайта в разные стороны от ее центра, и все будет хорошо, если сайт находится в центре. Иначе часть сайта может вылезти за пределы экрана, если не заданы линейки прокрутки. В html5 есть команды для масштабирования и перемещения полного сайта (картинки) как целого на экране. Но я пока не стану это описывать, так как меня интересует только javascript.

Пример, где такая проблема актуальна, можно посмотреть по ссылке [01]. Там показана коллекция из 36 фотографий в режиме презентации. Это такой режим, когда слайды показываются на весь экран и программа не показывает своего окна. Программ, использующих такой режим стало много. Так работают все видео-проигрыватели, редакторы картинок, программы презентаций Майкрософт-Офис и PDF. В браузерах такой режим реализуется клавишей [F11], но есть кнопка в настройках, а верхняя шапка не исчезает совсем, и может снова появиться, если курсор мыши стоит в верхней части экрана.

Ссылки на интернет

[01] sun-and sea.htm, презентация с комментариями

Виктор Кон,   17-07-2018