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

Question

Za pomocą przeglądarki Firefox można powiększyć całą stronę internetową, naciskając po prostu: CTRL+. To, co robi, to proporcjonalnie powiększać całą stronę (czcionki, obrazy itp.).

Jak mogę zreplikować tę samą funkcjonalność za pomocą samego CSS?

Czy istnieje coś takiego jak page-size: 150% (co zwiększyłoby całkowite części strony przez x%?)

Answer 1

Jeśli Twój CSS jest skonstruowany całkowicie wokół ex lub em jednostek, to może być to możliwe i wykonalne. Wystarczy zadeklarować font-size: 150% w swoim stylu dla body lub html. Powoduje to proporcjonalne skalowanie każdej długości. Nie można jednak przeskalować obrazów w ten sposób, o ile nie uzyskają odpowiedniego stylu.

Ale to jest bardzo duże jeśli na większości witryn, w każdym razie.

Answer 2

Możesz być w stanie korzystać z CSS zoom nieruchomości - obsługiwany w IE 5.5+, Opera, Safari 4 i Chrome

Can I use: css Zoom

Firefox jest jedynym dużym przeglądarka nie obsługuje powiększyć (bugzilla item here), ale możesz użyć "proprietary" -moz-transform property in Firefox 3.5.

Więc można użyć:

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

Answer 3

Johannes Jak mówi - nie wystarczy rep komentować bezpośrednio na jego odpowiedź - można rzeczywiście to zrobić tak długo jak „wymiary wszystkich elementów są określone jako wielokrotność rozmiaru czcionki, czyli wszystkiego, gdzie użyłeś%, em lub ex jednostek ". Chociaż myślę, że% zależy od elementu zawierającego element, a nie od rozmiaru czcionki.

A normalnie nie używałbyś tych względnych jednostek dla obrazów, ponieważ składają się one z pikseli, ale istnieje pewna sztuczka, która czyni to bardziej praktycznym.

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

Następnie można określić swoje (na przykład) obrazy kwadratowe o rozmiarach 100 pikseli za pomocą width: 10em; height: 10em; i zakładając, że skalowanie przeglądarki Firefox jest ustawione domyślnie, obrazy będą miały naturalny rozmiar.

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

Answer 4

Myślę, że nie da się tego zrobić wyłącznie za pomocą CSS - może być konieczne, abyś miał brudną rękę za pomocą Javascript, aby upewnić się, że praca została wykonana prawidłowo.

Answer 5

Jon Tan zrobił to ze swoją witryną - http://jontangerine.com/ Wszystko razem z obrazami 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 dokładnie taki sam wynik.

Answer 6

CSS nie będzie w stanie powiększyć na żądanie, ale jeśli łą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 trzeba jej replikować. W rzeczywistości, powielenie go spowolni twoją stronę internetową (więcej rzeczy do załadowania, więcej JS lub CSS do parsowania lub wykonania i zastosowania, itp.)

Answer 7

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

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

Answer 8

jest to dość późno odpowiedź, ale można użyć

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

aby powiększyć stronę o 110%. Chociaż istnieje styl zoom, Firefox nadal nie obsługuje go ze smutkiem.

Jest to również nieco inny niż zoom. W css transform działa jak zoom obrazu, więc będzie zwiększyć swoją stronę, ale nie powodują reflow itp

---

Edit aktualizowane pochodzenie przekształcenia.