Как я могу масштабировать всю веб-страницу с помощью CSS?


153

Используя Firefox, вы можете увеличить всю веб-страницу, просто нажав CTRL +. Это пропорционально увеличивает всю веб-страницу (шрифты, изображения и т. Д.).

Как я могу повторить ту же функциональность, используя просто CSS?

Есть ли что-то подобное page-size: 150%(что увеличило бы целые части страницы на x%?)


7
Функция масштабирования страницы в Firefox появляется в каждом современном браузере - копирование кажется довольно бессмысленным.
Квентин

1
Я согласен с Дэвидом. Кажется бессмысленным повторять это, так как браузеры в наши дни имеют встроенную функцию ....
пользователь

5
это на самом деле было бы невероятно полезной функцией для мобильных устройств. Многие телефоны в настоящее время увеличивают свой PPI без учета разницы (за исключением iPhone4, конечно).
DA.

38
Это не копирует это. Это может быть полезно для чего-то вроде предварительного просмотра страницы / элемента во встроенном div.
RichieHH

3
Дизайнер страницы должен иметь возможность установить масштаб по умолчанию для своей страницы. У меня была страница, которая была большой, когда я ее создавал , но теперь она маленькая из-за дисплеев с высоким разрешением: lonniebest.com/CardTrick Вместо того, чтобы переделывать страницу, я хотел бы увеличить ее по умолчанию.
Лонни Бест

Ответы:


182

Возможно, вы сможете использовать zoomсвойство CSS - поддерживается в IE 5.5+, Opera, Safari 4 и Chrome.

Можно ли использовать: css Zoom

Firefox - единственный крупный браузер, который не поддерживает Zoom ( элемент bugzilla здесь ), но вы можете использовать свойство "proprietary" -moz-transform в Firefox 3.5 .

Таким образом, вы можете использовать:

div.zoomed { 
    zoom: 3; 
    -moz-transform: scale(3); 
    -moz-transform-origin: 0 0;
} 

1
Собственное свойство zoom поддерживается только в IE. reference.sitepoint.com/css/zoom#compatibilitysection
Квентин,

15
Дэвид, эта ссылка очень устарела - взгляни на версии браузера, которые она перечисляет. CSS Zoom поддерживается во всех основных браузерах, кроме Firefox. И он не более проприетарный, чем любое из расширений -moz- CSS.
Джон Галлоуэй

3
Примечание. Я думаю, что другие предложенные решения, такие как em и масштабирование на основе%, являются более «чистыми», но не обязательно практичными для большинства веб-макетов, если вы не создали их с нуля.
Джон Галлоуэй

1
Я тестировал Opera 10b2, и она, кажется, не поддерживает ее. Firefox по ночам ведет себя странно (увеличенный фрагмент исчезает). IE5 / 6 глючит. Прекрасно работает только в WebKit.
Корнель

2
спасибо Джон, отличная информация! в Firefox масштаб -moz-transform действительно работает, но в зависимости от вашего варианта использования вам может потребоваться исправить положение элемента с помощью -moz-transform-origin (см. developer.mozilla.org/En/CSS/-moz-transform Происхождение )
Футтта

81

Это довольно поздний ответ, но вы можете использовать

body {
   transform: scale(1.1);
   transform-origin: 0 0;
   // add prefixed versions too.
}

чтобы увеличить страницу на 110%. Хотя zoomстиль есть, Firefox все еще не поддерживает его, к сожалению.

Кроме того, это немного отличается от вашего зума. css transformРаботает как масштабирование изображения, так что это увеличит вашу страницу , но не причиной оплавления и т.д.


Редактировать обновленный источник трансформации.


1
Спасибо за это, но вам нужно несколько точек с запятой между объявлениями. Кроме того, когда я попытался это сделать, страница сместилась влево за левое поле, так что левая часть страницы перестала быть видимой. Добавление различных соответствующих объявлений "... transform-origin: 0 0" исправило это.
Дейв Бертон

да, я должен был упомянуть, что содержание обрезано transform. Спасибо за комментарий.
kumarharsh

1
Я согласен с @Dave Burton: использование transform-origin: 0 0;делает то, что я хочу. Например, чтобы увеличить страницу до 150%: transform: scale(1.5); transform-origin: 0 0;. Я считаю, что хороший ответ @kumar_harsh должен быть исправлен.
Кай Карвер

@KaiCarver, если вы используете этот метод, это всегда приведет к отсечению. Неважно, какую точку вы используете transform-origin. То, что я написал, является лишь одним примером того, какую ценность использовать. Вы, конечно, можете свободно использовать transform-origin: 0 0его, если он подходит для вашего сценария использования (или если вас не интересует, что находится в правом нижнем углу)
kumarharsh

@AngularM Вы можете поделиться фрагментом кода, чтобы показать поведение? Я уверен, что есть другая причина для этого.
kumarharsh

18

Если ваш CSS построен полностью вокруг exили emединиц, то это может быть возможно и осуществимо. Вам просто нужно объявить font-size: 150%в своем стиле для bodyили html. Это должно привести к пропорциональному масштабированию любой другой длины. Вы не можете масштабировать изображения таким образом, если только у них тоже нет стиля.

Но в любом случае это очень большая цифра на большинстве сайтов.


3
Это только изменит размер моих шрифтов. CTRL + также расширяет фиксированную ширину, высоту и размеры изображения.

2
Я знаю, но это так близко, как вы можете получить с чистым CSS. Также меняются не только ваши шрифты, но и все, где размеры указаны как кратные размеру шрифта. То есть все, что вы использовали %, emили exединицы.
Джои

1
Это просто не правильно. Я протестировал решение, которое я перечислил ниже (свойства zoom + -moz-transform), и оно работает на FF3.5, IE6 +, Safari и Opera. Он масштабирует изображения и текст. Вы можете масштабировать страницы в CSS.
Джон Галлоуэй

6

Как говорит Йоханнес - недостаточно представителя, чтобы комментировать свой ответ - вы действительно можете сделать это, если размеры всех элементов указаны как кратные размеру шрифта. Это означает, что все, где вы использовали%, em или ex единицы". Хотя я думаю, что% основаны на содержании элемента, а не на размере шрифта.

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

Если вы определите, body{font-size: 62.5%};то 1em будет эквивалентно 10px. Насколько я знаю, это работает во всех основных браузерах.

Затем вы можете указать свои (например) квадратные изображения размером 100px width: 10em; height: 10em;и, предполагая, что масштабирование Firefox по умолчанию установлено, изображения будут иметь их естественный размер.

Сделать body{font-size: 125%};и все - включая изображения - будет двойной оригинальный размер.


Я не понимаю, если я скажу body {font-size: 62,5%; font-size: 125%} - как бы определить 1em как 10px. Может ли браузер просто игнорировать первое объявление размера шрифта, а затем просто сделать 125% = 10 пикселей?

Я думаю, что вы не поняли. ты не сделал бы и то и другое одновременно. 62,5 x2 = 125 ... чтобы показать, как вы можете масштабировать вещи, регулируя значение.
Обезьяна

Ага. Я должен был сказать «тогда, если вы используете Javascript для установки body {font-size: 125%}, все элементы страницы удвоятся в размере».
e100



1

Джон Тан сделал это на своем сайте - http://jontangerine.com/ Все, включая изображения, было объявлено в ems. Все. Так достигается желаемый эффект. Масштабирование текста и масштабирование экрана дают практически одинаковый результат.


1

CSS не сможет масштабировать по требованию, но если вы соедините CSS с JS, вы можете изменить некоторые значения, чтобы страница выглядела больше. Однако, как уже было сказано, эта функция является стандартной в настоящее время в современных браузерах: ее не нужно повторять. На самом деле, его репликация замедлит работу вашего сайта (больше вещей для загрузки, больше JS или CSS для анализа, выполнения и применения и т. Д.)


Это стандартная функция браузера, но добавление этой функции непосредственно на сайт означает, что вам не нужно полагаться на (1) опыт пользователя в выборе браузера и (2) инструкции для конкретного браузера
Ags1

1

У меня есть следующий код, который масштабирует всю страницу через свойства CSS. Важно установить значение body.style.width, обратное масштабированию, чтобы избежать горизонтальной прокрутки. Вы также должны установить transform-origin в верхний левый угол, чтобы верхний левый угол документа оставался в верхнем левом углу окна.

        var zoom = 1;
        var width = 100;

        function bigger() {
            zoom = zoom + 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
        function smaller() {
            zoom = zoom - 0.1;
            width = 100 / zoom;
            document.body.style.transformOrigin = "left top";
            document.body.style.transform = "scale(" + zoom + ")";
            document.body.style.width = width + "%";
        }
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.