Jak mogę skalować całą stronę internetową za pomocą CSS?

Korzystając z przeglądarki Firefox, możesz powiększyć całą stronę internetową, po prostu naciskając CTRL +. Powoduje to proporcjonalne powiększenie całej strony internetowej (czcionki, obrazy itp.).

Jak mogę powielić tę samą funkcjonalność używając prostego CSS?

Czy jest coś takiego page-size: 150%(co zwiększyłoby całą stronę o x%?)

Możesz być w stanie użyć zoomwłaściwości CSS - obsługiwanej w IE 5.5+, Opera i Safari 4 oraz Chrome

Czy mogę użyć: css Zoom

Firefox jest jedyną dużą przeglądarką, która nie obsługuje Zoom ( tutaj pozycja bugzilla ), ale możesz użyć "własnościowej" właściwości -moz-transform w Firefoksie 3.5 .

Możesz więc użyć:

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

To dość późna odpowiedź, ale możesz użyć

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

aby powiększyć stronę o 110%. Chociaż zoomstyl istnieje, Firefox nadal go niestety nie obsługuje.

Jest to również nieco inne niż zoom. css transformDziała jak zoom obrazu, więc będzie zwiększyć swoją stronę, ale nie przyczyną reflow, etc.

Edycja zaktualizowała początek transformacji.

Jeśli Twój CSS jest zbudowany całkowicie wokół exlub emjednostek, może to być możliwe i wykonalne. Wystarczy, że zadeklarujesz font-size: 150%w swoim stylu dla bodylub html. Powinno to spowodować proporcjonalne skalowanie wszystkich innych długości. Nie możesz jednak skalować obrazów w ten sposób, chyba że one również otrzymają styl.

Ale i tak jest to bardzo duże, jeśli w większości witryn.

Jak mówi Johannes - za mało przedstawiciela, by skomentować bezpośrednio jego odpowiedź - rzeczywiście możesz to zrobić, o ile wymiary wszystkich elementów są określone jako wielokrotność rozmiaru czcionki. Oznacza to, że wszystko, w którym użyłeś%, em lub ex jednostki ”. Chociaż myślę, że% opiera się na elemencie zawierającym, a nie na rozmiarze czcionki.

I normalnie nie używałbyś tych jednostek względnych do obrazów, biorąc pod uwagę, że składają się one z pikseli, ale istnieje sztuczka, która sprawia, że ​​jest to o wiele bardziej praktyczne.

Jeśli zdefiniujesz, body{font-size: 62.5%};1em będzie równoważne 10px. O ile wiem, działa to we wszystkich głównych przeglądarkach.

Następnie możesz określić swoje (np.) Kwadratowe obrazy o width: 10em; height: 10em;wielkości 100 pikseli z i zakładając, że skalowanie Firefoksa jest ustawione na domyślne, obrazy będą miały naturalny rozmiar.

Marka body{font-size: 125%};i wszystko - w tym obrazy - będzie miało podwójny oryginalny rozmiar.

Z tym kodem 1em lub 100% będzie równe 1% wysokości ciała

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

 * {
transform: scale(1.1, 1.1)
}

to przekształci każdy element na stronie

Jon Tan zrobił to ze swoją witryną - http://jontangerine.com/ Wszystko, w tym obrazy, zostało zadeklarowane w ems. Wszystko. W ten sposób osiąga się pożądany efekt. Powiększenie tekstu i powiększenie ekranu dają prawie taki sam wynik.

CSS nie będzie w stanie powiększyć na żądanie, ale jeśli połączysz CSS z JS, możesz zmienić niektóre wartości, aby strona wyglądała na większą. Jednak, jak już powiedziano, ta funkcja jest obecnie standardem w nowoczesnych przeglądarkach: nie ma potrzeby jej replikowania. W rzeczywistości jego replikacja spowolni twoją witrynę (więcej rzeczy do załadowania, więcej JS lub CSS do przeanalizowania lub wykonania i zastosowania itp.)

Mam następujący kod, który skaluje całą stronę za pomocą właściwości CSS. Ważne jest, aby ustawić body.style.width na odwrotność powiększenia, aby uniknąć przewijania w poziomie. Musisz także ustawić źródło transformacji na lewy górny róg, aby pozostawić lewy górny róg dokumentu w lewym górnym rogu okna.

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