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

153

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%?)

IJ Kennedy
źródło
7
Funkcja powiększania strony w Firefoksie pojawia się w każdej nowoczesnej przeglądarce - jej kopiowanie wydaje się raczej bezcelowe.
Quentin,
1
Zgadzam się z Davidem. Powielanie tego wydaje się bezcelowe, ponieważ przeglądarki mają teraz wbudowaną tę funkcję ...
użytkownik
5
w rzeczywistości byłaby to niezwykle przydatna funkcja dla urządzeń mobilnych. Wiele telefonów zwiększa teraz swój PPI bez uwzględniania różnicy (oprócz iPhone4, oczywiście).
DA.
38
Nie powiela tego. Może to być przydatne w przypadku podglądu strony / elementu w osadzonym elemencie div.
RichieHH
3
Projektant strony powinien mieć możliwość ustawienia domyślnego powiększenia dla swojej strony. Mam stronę, która była duża, kiedy ją tworzyłem , ale teraz mała ze względu na wyświetlacze o wysokiej rozdzielczości: lonniebest.com/CardTrick Zamiast przerabiać stronę, chciałbym, aby była domyślnie powiększona.
Lonnie Best

Odpowiedzi:

182

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;
} 
Jon Galloway
źródło
1
Zastrzeżona właściwość zoom jest obsługiwana tylko przez IE. reference.sitepoint.com/css/zoom#compatibilitysection
Quentin,
15
David, to odniesienie jest bardzo nieaktualne - spójrz na wersje przeglądarek, które zawiera. Zoom CSS jest obsługiwany we wszystkich aktualnych przeglądarkach z wyjątkiem Firefox. I nie jest bardziej zastrzeżone niż którekolwiek z rozszerzeń -moz- CSS.
Jon Galloway
3
Uwaga: Myślę, że inne zaproponowane rozwiązania - takie jak skalowanie oparte na em i% - są bardziej „czyste”, ale niekoniecznie są praktyczne w większości układów internetowych, chyba że zbudowałeś je od zera.
Jon Galloway
1
Przetestowałem Operę 10b2 i wygląda na to, że jej nie obsługuje. Firefox nocą zachowuje się dziwnie (powiększony fragment znika). IE5 / 6 są błędne. Działa dobrze tylko w WebKit.
Kornel
2
dzięki Jon, świetne informacje! w firefox -moz-transform scale rzeczywiście działa, ale w zależności od przypadku użycia może zajść potrzeba skorygowania pozycji elementu za pomocą -moz-transform-origin (por. developer.mozilla.org/En/CSS/-moz-transform -origin )
futtta
81

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.

kumarharsh
źródło
1
Dzięki za to, ale potrzebujesz kilku średników między deklaracjami. Ponadto, gdy próbowałem to zrobić, strona przesunęła się w lewo, poza lewy margines, tak że lewa część strony nie była już widoczna. Dodanie różnych odpowiednich deklaracji „... transform-origin: 0 0” rozwiązało ten problem.
Dave Burton
tak, powinienem był wspomnieć, że zawartość jest ucinana transform. Dziękuję za komentarz.
kumarharsh
1
Zgadzam się z @Dave Burton: używanie transform-origin: 0 0;robi to, co chcę. Na przykład, aby powiększyć stronę 150%: transform: scale(1.5); transform-origin: 0 0;. Uważam, że w innym przypadku dobra odpowiedź @kumar_harsh powinna zostać poprawiona.
Kai Carver
@KaiCarver jeśli użyjesz tej metody, zawsze spowoduje to obcinanie. Bez względu na to, do którego punktu używasz transform-origin. To, co napisałem, to tylko jeden przykład tego, jakiej wartości użyć. Oczywiście możesz swobodnie korzystać, transform-origin: 0 0jeśli pasuje do twojego przypadku użycia (lub jeśli nie obchodzi cię, co jest w prawym dolnym rogu)
kumarharsh
@AngularM Czy możesz udostępnić fragment kodu, aby pokazać zachowanie? Jestem pewien, że jest inny powód.
kumarharsh
18

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.

Joey
źródło
3
To tylko zmieniłoby rozmiar moich czcionek. CTRL + również propozycja poszerza stałe szerokości, wysokości i rozmiary obrazu.
2
Wiem, ale jest tak blisko, jak można uzyskać za pomocą czystego CSS. Zmieniają się także nie tylko czcionki, ale wszystko, czego wymiary są określone jako wielokrotność rozmiaru czcionki. Czyli, gdzie wszystko zostało użyte %, emlub exjednostek.
Joey,
1
To po prostu nie jest poprawne. Przetestowałem rozwiązanie, które wymieniłem poniżej (właściwości zoom + -moz-transform) i działa na FF3.5, IE6 +, Safari i Opera. Skaluje zarówno obrazy, jak i tekst. Możesz skalować strony w CSS.
Jon Galloway
6

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.

e100
źródło
Nie rozumiem, jeśli powiem body {rozmiar czcionki: 62,5%; font-size: 125%} - jak to zdefiniowałoby 1em jako 10px. Czy przeglądarka może po prostu zignorować pierwszą deklarację rozmiaru czcionki, a następnie po prostu ustawić 125% = 10 pikseli?
Myślę, że źle zrozumiałeś. nie zrobiłbyś obu naraz. 62,5 x2 = 125 ... aby pokazać, jak możesz skalować rzeczy, dostosowując wartość.
Ape-inago
Tak. Powinienem był powiedzieć „wtedy, jeśli użyjesz JavaScript do ustawienia body {font-size: 125%}, wszystkie elementy strony podwoją się”.
e100
3

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

document.body.style.fontSize = ((window.innerHeight/100)*6.25)+"%"
Cedric Austen-Brown
źródło
2
 * {
transform: scale(1.1, 1.1)
}

to przekształci każdy element na stronie

Rushabh Sooni
źródło
1

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.

Andy Ford
źródło
1

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.)

T0xicCode
źródło
Jest to standardowa funkcja przeglądarki, ale dodanie tej funkcji bezpośrednio do witryny oznacza, że ​​nie musisz polegać na (1) wiedzy użytkownika w zakresie wybranej przeglądarki i (2) instrukcjach specyficznych dla przeglądarki
Okres 1
1

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 + "%";
        }
Ags1
źródło