Программно уменьшить масштаб веб-страницы

Мы создаем веб-приложение, которое отлично работает на 19-дюймовом экране (запускается в Firefox как киоск). Оно включает в себя множество изображений и текстового содержимого, размещенного вокруг этих изображений. Оно работало нормально, пока мы не сменили устройство на 18,5-дюймовый экран. Теперь вокруг него есть полосы прокрутки. Содержимое и изображения не подходят. Нам нужно уменьшить масштаб Firefox, чтобы он полностью поместился на экране, но это не то, что мы хотим.

Есть ли способ увеличить все на странице до уровня 90% от нормального размера. Значит, нам не нужно вручную уменьшать масштаб Firefox?


javascript zooming
person Hüseyin Zeki    schedule 08.04.2012    source источник
comment
возможный дубликат Изменение уровня масштабирования браузера   -  person Rory McCrossan    schedule 08.04.2012
comment
Вам следует изучить Responsive web design   -  person Rory McCrossan    schedule 08.04.2012

Ответы (3)


arrow_upward
2
arrow_downward

Возможно, вы сможете использовать transform: scale(.9) для элемента body. Хотя в будущем я бы порекомендовал создавать адаптивный дизайн с использованием медиазапросов.

Это будет -moz-transform: scale(.9) специально для Firefox.

person powerbuoy    schedule 08.04.2012
comment
Я добавил -moz-transform: масштаб (90%), но ничего не произошло. Есть что еще добавить? - person Hüseyin Zeki; 08.04.2012
comment
Есть одна большая загвоздка - Firefox НЕ обрабатывает transform:scale() должным образом - он уменьшает масштаб, но также перемещает содержимое сверху и слева вниз и справа - в зависимости от того, насколько велико уменьшение - есть ли способ избежать Это ? Таким образом, Mozilla просто изменила бы размер страницы, не перемещая ее, например, из центр страницы? Спасибо... - person jave.web; 03.07.2013

arrow_upward
1
arrow_downward

Физический размер монитора не важен. Что имеет значение, так это разрешение, отображаемое на этом экране. Узнайте, какое разрешение было установлено на старом экране, и посмотрите, поддерживает ли новый экран такое же разрешение. Если это так, отлично, установите его на это. Если нет, возможно, вам лучше переработать макет, чтобы он работал не только с одним конкретным разрешением...

person Niet the Dark Absol    schedule 08.04.2012
comment
Да спасибо хорошая идея. я попробую это, но у меня сейчас нет 19 экранов. Большое спасибо. - person Hüseyin Zeki; 08.04.2012

arrow_upward
0
arrow_downward

Решение состоит из 2 шагов:

  1. Сделайте все, кроме шрифтов, гибким. Например: таблицы, div, меню.
  2. Отредактируйте размер шрифта.

Изменение размера шрифта также делает сайт больше или меньше.

person anilbey    schedule 29.12.2012