Як я можу масштабувати всю веб-сторінку за допомогою CSS?

За допомогою Firefox ви можете збільшити всю веб-сторінку, просто натиснувши її CTRL +. Це робить пропорційно збільшити всю веб-сторінку (шрифти, зображення тощо).

Як я можу повторити ту саму функціональність, використовуючи просто CSS?

Чи є щось на зразок page-size: 150%(що збільшило б усі частини сторінки на x%?)

Можливо, ви зможете використовувати zoomвластивість CSS - підтримується в IE 5.5+, Opera та Safari 4 та Chrome

Чи можу я використовувати: css Збільшити

Firefox - єдиний головний браузер, який не підтримує масштабування ( тут використовується елемент bugzilla ), але ви можете використовувати "власницьку" властивість -moz-перетворення у Firefox 3.5 .

Отже, ви можете використовувати:

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

Це досить пізня відповідь, але ви можете скористатися

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

щоб збільшити масштаб сторінки на 110%. Хоча zoomстиль є, Firefox все ще не підтримує його на жаль.

Також це трохи відрізняється від вашого масштабування. Це css transformпрацює як масштабування зображення, тому воно збільшить вашу сторінку, але не спричинить поповнення тощо.

Редагування оновило походження трансформації.

Якщо ваш CSS побудований повністю навколо exабо emодиниць, це може бути можливим і здійсненним. Вам просто потрібно заявити font-size: 150%у своєму стилі для bodyабо html. Це повинно спричинити пропорційне масштабування будь-якої іншої довжини. Тим не менше не можеш масштабувати зображення, якщо вони теж не отримають стиль.

Але це дуже важливо, якщо на більшості сайтів так чи інакше.

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

І ти зазвичай не використовуєш ці відносні одиниці для зображень, враховуючи, що вони складаються з пікселів, але є хитрість, яка робить це набагато більш практичним.

Якщо ви визначите, body{font-size: 62.5%};то 1em буде еквівалентний 10px. Наскільки мені відомо, це працює у всіх основних браузерах.

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

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

З цим кодом 1ем або 100% буде дорівнює 1% від росту тіла

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"

 * {
transform: scale(1.1, 1.1)
}

це перетворить кожен елемент на сторінці

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

CSS не зможе збільшити масштаб попиту, але якщо ви з'єднаєте CSS з JS, ви можете змінити деякі значення, щоб сторінка виглядала більшою. Однак, як було сказано, ця функція є стандартною в наші дні в сучасних браузерах: не потрібно її копіювати. Власне кажучи, його реплікація сповільнить ваш веб-сайт (більше завантажуваних речей, більше JS або CSS для розбору або виконання та застосування та ін.)

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

        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 + "%";
        }