Как получить поведение «Ctrl +» в браузере с помощью Javascript?

Я открыл веб-сайт Stack Overflow на своем 47-дюймовом ЖК-телевизоре (разрешение 1920 * 1080, 16:9) и нашел текст и веб-сайт прямо посреди большого количества пробелов. Текст был нечитаем, потому что Stack Overflow, как и многие другие веб-сайты, оптимизирован для стандартных окон просмотра 1200/1024.

Чтобы сделать веб-сайт читабельным, я нажимал клавиши «ctrl» и «+» и как бы заставлял контент занимать больше ширины экрана. Я уверен, что это не «увеличение», потому что на самом деле браузер увеличивает размер содержимого (т.е. уменьшает количество пикселей на символ).

Можно ли добиться такого поведения «ctrl +» с помощью Javascript в качестве упражнения перед рендерингом после определения параметра разрешения/размера области просмотра?

Обновление: я попробовал @media-queries, который масштабирует размеры шрифта и другие несколько вещей, но это не помогает сбалансированно масштабировать изображения и остальной контент (например, отступы и т. д.). . Самое главное, он не удовлетворяет условию ограничения размера данного div, чтобы сказать «610 пикселей и при этом занимать 75%» доступной ширины экрана.

Это похоже на изменение разрешения, если мы нажмем ctrl + в браузерах на основе Gecko/Webkit. Извините, не могу принять ответ ниже.


person Marvin Danig    schedule 07.12.2011    source источник


Ответы (2)


В основном да. В IE6,7 есть zoom, а в IE8 есть -ms-zoom

У всех остальных есть 2D-преобразования и scale(), так что вы защищены. см. масштабирование css/javascript

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

person Community    schedule 16.02.2012
comment
Это классный совет @paul. Позвольте мне увидеть результаты и ответить в ближайшее время. - person Marvin Danig; 26.02.2012
comment
Я пытался использовать scale(), но, в конце концов, я разобрался с этим, используя другой алгоритм. Вот демонстрационная страница, которая разрешается в стационарном режиме: bubbles.bubbleideas.com/letters/ Это означает, что независимо от того, сколько Ctrl+/Ctrl- нажимает пользователь, бумага будет разрешаться так, как будто она неподвижна относительно пикселей устройства. /экран. Извините, что обновляю так поздно. - person Marvin Danig; 14.06.2012

Я уверен, что это возможно с javascript, как и большинство вещей, но я думаю, что это именно та проблема, с которой CSS Media Queries были специально разработаны решать.

Ознакомьтесь со статьей об адаптивном веб-дизайне в A List Apart.

person Cory Danielson    schedule 07.12.2011
comment
Назначение диапазона max-width min-width (@media-queries) действительно помогает, но, похоже, не дает точного эффекта «ctrl +» в браузере. Например, следующий веб-сайт имеет адаптивный веб-дизайн: foundation.zurb.com, но не вполне масштабируется, чтобы заполнить весь экран телевизора и в то же время быть удобочитаемым. Мне нужно использовать «ctrl +», чтобы увеличить размер текста и изображения. Я считаю, что адаптивный дизайн больше фокусируется на обработке макета контента между альбомным и портретным режимами. - person Marvin Danig; 08.12.2011
comment
Что ж, этот веб-сайт имеет макет с фиксированной шириной около 980 пикселей, когда ширина экрана очень большая. Вы хотите применить этот эффект ctrl + к своему веб-сайту или к плагину для браузера? - person Cory Danielson; 08.12.2011
comment
да. Я думал о создании веб-сайта, полностью разработанного на процентных объявлениях, с только «минимальной шириной», чтобы обеспечить целостность макета при сжатии/изменении размера браузера. Есть ли какой-либо известный/реализованный способ (с использованием javascript), чтобы убедиться, что браузер масштабируется до разрешения, при котором ширина% в конечном итоге дает размеры элемента с фиксированным количеством пикселей? - person Marvin Danig; 08.12.2011
comment
Нет, я не знаю, как это сделать... но я полагаю, вы могли бы использовать медиа-запросы и в более высоких разрешениях увеличить размер шрифта с 11/12 пикселей до, возможно, 18 пикселей или выше. - person Cory Danielson; 08.12.2011