Увеличить размер всей HTML-страницы?

Я знаю, что это плохая практика, но я сделал страницу с почти полностью фиксированным размером.

Кроме того, есть много JavaScript и интерактивных частей, связанных с координатами вашего курсора и т. д.

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

Есть ли какой-нибудь атрибут / функция CSS (или HTML или JavaScript), которые позволили бы мне увеличить масштаб весь? Я знаю, что могу использовать transform: scale(x) в CSS вместе с некоторыми другими подобными вещами, но есть ли способ масштабировать все, включая координаты курсора?

Спасибо!

Обновлено: см. Комментарии для получения дополнительной информации.

$(document).ready(main);
function main(){

"use strict";

var popup = window;
var doc = document;
var $body = $('body', doc)[0];
var $inputs = doc.getElementsByClassName('note');
var $paragraphs = doc.getElementsByTagName('p');

doc.title = "Assignment Notebook";

$body.innerHTML = "<canvas></canvas>";

var images = {
  left : "https://i.imgur.com/xlnvl6M.png",
  right : "https://i.imgur.com/o8XT5X1.png"
}

var snapPoints = [62,84,106,128,150,172,194,216,238,261,283,305,327,349,371,393,415,438,462,484,506,528,550,572,594,616];

var inputs = {};

var d = new Date();
var week;
function setWeek() {
  week = [];
  for (var i = 1; i < 8; i++) {
    var _d = new Date(d);
    week[i-1] = new Date(_d.setDate(_d.getDate() - _d.getDay()+i));
  }
}
setWeek();
var months = {0: 'January',1: 'February',2: 'March',3: 'April',4: 'May',5: 'June',6: 'July',7: 'August',8: 'September',9: 'October',10: 'November',11: 'December'};
var df;
function updateFormat(n) {
  df = formatDate(week[n].getDay()-1, '');
}
function checkArr() {
  var start = left ? 0 : 3;
  var end = left ? 3 : 7;
  for (var i = start; i < end; i++) {
    updateFormat(i);
    if (!inputs[df]) {
      inputs[df] = [];
    } else if (JSON.stringify(inputs[df]) != "[]") {
      for (var j = 0; j < inputs[df].length; j++) {
        let data = inputs[df][j];
        createInput(data.x, data.y, data.fontFamily, data.fontSize, data.width, data.bg, data.txt);
      }
    }
  }
}
var left = (d.getDay() == 0 || d.getDay() > 3) ? false : true;
$body.style.backgroundImage = left ? "url("+images.left+")" : "url("+images.right+")";
$body.style.backgroundSize = "480px 680px";
$body.style.backgroundRepeat = "no-repeat";
$body.style.margin = "0";
checkArr();
var ctx = $('canvas', doc)[0].getContext('2d');
var fontFamily = 'sans-serif';
var fontSize = 14;
ctx.font = fontSize+' '+fontFamily;
function createP (text, family, weight, size, x, y) {
  var p = doc.createElement("P");
  p.setAttribute("type", "text");
  p.style.position = 'fixed';
  p.style.fontFamily = family;
  p.style.fontWeight = weight;
  p.innerHTML = text;
  p.style.top = y;
  p.style.left = x;
  p.style.fontSize = size;
  p.style.userSelect = 'none';
  $body.appendChild(p);
}
function formatDate(dayIndex, join) {
  if (dayIndex == -1) dayIndex = 6;
  return months[week[dayIndex].getMonth()]+join+week[dayIndex].getDate();
}
left ? (
  createP(formatDate(0, ' '), 'Helvetica', '300', '11px', '114px', '36px'),
  createP(formatDate(1, ' '), 'Helvetica', '300', '11px', '116px', '235px'),
  createP(formatDate(2, ' '), 'Helvetica', '300', '11px', '140px', '436px')
) : (
  createP(formatDate(3, ' '), 'Helvetica', '300', '11px', '126px', '36px'),
  createP(formatDate(4, ' '), 'Helvetica', '300', '11px', '102px', '235px'),
  createP(formatDate(5, ' '), 'Helvetica', '300', '11px', '72px', '436px'),
  createP(formatDate(6, ' '), 'Helvetica', '300', '11px', '276px', '436px')
);
function createInput(x, y, ff, fs, width, bg, txt) {
  fs = parseInt(fs);
  var input = doc.createElement("INPUT");
  input.setAttribute("type", "text");
  input.setAttribute("placeholder", "Type here!");
  input.style.position = 'fixed';
  input.classList.add('note');
  $body.appendChild(input);
  input.style.left = x;
  input.style.top = snap ? getClosest(y+fs)-fs : y;
  input = $inputs[$inputs.length-1];
  typeof txt != "string" ? input.focus() : input.value = txt;
  input.style.backgroundColor = bg;
  input.style.border = 'none';
  input.style.outline = 'none';
  input.style.width = width;
  input.style.fontFamily = ff;
  input.style.fontSize = fs;
  input.style.backgroundColor = bg;
  input.draggable = true;
  input.addEventListener('keyup', e => {
    ctx.font = window.getComputedStyle(input).getPropertyValue('font-size')+' '+window.getComputedStyle(input).getPropertyValue('font-family');
    e.path[0].style.width = !!e.path[0].value ? ctx.measureText(e.path[0].value).width+3 : 86;
  });
}

var diff = {
  x : null,
  y : null
}

doc.addEventListener('dragstart', e => {
  diff.x = e.clientX - parseInt(e.target.style.left);
  diff.y = e.clientY - parseInt(e.target.style.top);
});
doc.addEventListener('dragend', e => {
  let height = parseInt(window.getComputedStyle(e.target).getPropertyValue('font-size'));
  e.target.style.left = e.clientX-diff.x;
  e.target.style.top = snap ? getClosest(e.clientY-diff.y+height)-height : e.clientY-diff.y;
});

doc.addEventListener('keyup', e => {
  if (doc.activeElement.tagName != "INPUT" && e.keyCode == 37 || e.keyCode == 39) {
    var inpLen = $inputs.length;
    var pLen = $paragraphs.length;
    for (var i = 0; i < inpLen; i++) {
      $inputs[0].remove();
    }
    for (var i = 0; i < pLen; i++) {
      $paragraphs[0].remove();
    }
    if (e.keyCode == 37) {
      if (d.getDay() > 0 && d.getDay() < 4) {
        d = new Date(week[0].setDate(week[0].getDate() - week[0].getDay()-3));
      } else {
        d = new Date(week[0].setDate(week[0].getDate() - week[0].getDay()+1));
      }
    } else {
      if (d.getDay() > 0 && d.getDay() < 4) {
        d = new Date(week[0].setDate(week[0].getDate() - week[0].getDay()+4));
      } else {
        d = new Date(week[0].setDate(week[0].getDate() - week[0].getDay()+8));
      }
    }
    setWeek();
    left = (d.getDay() == 0 || d.getDay() > 3) ? false : true;
    $body.style.backgroundImage = left ? "url("+images.left+")" : "url("+images.right+")";
    left ? (
      createP(formatDate(0, ' '), 'Helvetica', '300', '11px', '114px', '36px'),
      createP(formatDate(1, ' '), 'Helvetica', '300', '11px', '116px', '235px'),
      createP(formatDate(2, ' '), 'Helvetica', '300', '11px', '140px', '436px')
    ) : (
      createP(formatDate(3, ' '), 'Helvetica', '300', '11px', '126px', '36px'),
      createP(formatDate(4, ' '), 'Helvetica', '300', '11px', '102px', '235px'),
      createP(formatDate(5, ' '), 'Helvetica', '300', '11px', '72px', '436px'),
      createP(formatDate(6, ' '), 'Helvetica', '300', '11px', '276px', '436px')
    );
    checkArr();
  }
});

doc.addEventListener('dblclick', e => {
  if (doc.activeElement.tagName != "INPUT" && !deleteMode) {
    createInput(e.clientX, parseInt(e.clientY)-9.5, fontFamily, fontSize, 86, "transparent", true);
  }
});
var snap = false;
var deleteMode = false;
function getClosest(n) {
  if (isNaN(n) || typeof n != 'number') err('Number isn\'t of type "number", or it is NaN');
  return snapPoints.reduce((a, b) => Math.abs(b - n) < Math.abs(a - n) ? b : a);
}

function err(error) {
  console.info(new Error(error));
}
}
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Вам нужно показать полностью рабочий пример.

antfuentes87 29.06.2018 02:49

В том-то и дело, что рабочего примера у меня нет. И это общая идея, поэтому ответ, который я ищу, будет работать с любой страницей.

Andrew 29.06.2018 02:51

По крайней мере, по мне, я не смогу вам помочь. Я не совсем понимаю, о чем вы спрашиваете. К тому же, когда вы упоминаете масштабирование координат курсора, для меня это не имеет смысла. Надеюсь, кто-то еще может вам помочь, но я почти уверен, что вам понадобится предоставить какую-то демонстрацию.

antfuentes87 29.06.2018 02:53

Сообщение отредактировано и включает демо.

Andrew 29.06.2018 03:24

Я понимаю, но слишком много символов, чтобы вставить его во фрагмент, а фрагменты / jsfiddle блокируют всплывающие окна (главная страница - это всплывающее окно)

Andrew 29.06.2018 03:28

Под вопросом: "I made a page with almost entirely fixed sizing.", а затем… В комментарии: "That's the thing, I don't have a working example." - Похоже, вы это делаете, но если нет ... сделайте один?

vol7ron 29.06.2018 03:31

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

Andrew 29.06.2018 03:32

Можете ли вы перенести свою демонстрацию на фрагмент кода, который предоставляет Stack Overflow?

vol7ron 29.06.2018 03:33

Я не могу. there are too many characters to put it in a snippet, and snippets/jsfiddle block pop-ups (the main page is a popup)

Andrew 29.06.2018 03:33

Ах, вы пробовали удалить эти два изображения Base64? Просто рабочая демонстрация должна работать концептуально, чтобы другие могли быстрее понять / отладить. Будет лучше для их времени и для вашего, если вы ищете быстрое решение. Pastebin почти бесполезен, JSFiddle лучше, чем ничего, но рекомендуется использовать фрагмент кода, чтобы другие могли быстро скопировать / вставить ваш пример.

vol7ron 29.06.2018 03:36

Дайте мне немного времени, чтобы удалить всплывающие окна, изображения использования локального хранилища и изображения base64, а затем я опубликую фрагмент

Andrew 29.06.2018 03:37

Хорошо, у меня нет времени, чтобы заставить фрагмент работать безупречно, но вроде как работает? Если вы используете тот же код внутри html-документа, он будет работать, это просто фрагмент. Но я надеюсь, что это дает вам представление.

Andrew 29.06.2018 03:59

По сути, когда вы дважды щелкаете мышью, создается элемент ввода там, где вы щелкнули (эта часть не работает с фрагментом, но вы поняли идею). Цель состоит в том, чтобы вводить данные именно там, где вы щелкнули, независимо от размера (который я бы изменил с помощью свойства css zoom в теле). Вы можете легко добиться этого, разделив координаты на масштаб, но в этом коде есть множество других факторов, которые зависят от координат, так есть ли другой способ сделать это?

Andrew 29.06.2018 04:02

Не особо актуально (?) Но ваша демонстрация показывает неправильный день / дату. Я в Мельбурне, Австралия, сейчас 12:07 пятницы, 29-го. В вашем демо указано четверг, 28 июня (и, похоже, больше ничего не делается)

enhzflep 29.06.2018 04:07

@enhzflep да, это не актуально. @ Андрей, спасибо за пример. Почему вы решили использовать фиксированный размер? Кажется, что все внутри контейнера, который вы хотите изменить, должно быть em, что позволит вам изменить размер контейнера и автоматически повлиять на все остальное. Кроме того, почему вы не можете использовать zoom в контейнере?

vol7ron 29.06.2018 04:11

Многие люди раньше решали проблему масштабирования с помощью SVGMatrix. Пример использования (в данном случае с масштабированным холстом) можно найти в ответе, предоставленном Phrogz, здесь: stackoverflow.com/questions/5526486/…

enhzflep 29.06.2018 04:13

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

vol7ron 06.07.2018 19:12
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
17
118
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Один обходной путь, который вы можете использовать для масштабирования всего документа, поскольку вы сделали фиксированное масштабирование всей страницы, - это включить всю страницу в iframe (https://www.w3schools.com/html/html_iframe.asp), который охватывает всю страницу. Таким образом, вы можете поиграть с масштабированием / масштабированием iframe, но пользователь увидит эту страницу только внутри iframe.

Вы можете поэкспериментировать с CSS iframe, чтобы получить правильный способ отображения внутренней страницы.

Спасибо! Это именно тот ответ, который я искал. И спасибо всем, кто помогал!

Andrew 30.06.2018 01:56

Другие вопросы по теме