Jak mogę powiększyć element HTML w Firefoksie i Operze?

Question 1

zoomObiekt działa w IE, Google Chrome i Safari, ale to nie działa w Firefox i Opera.

Czy istnieje metoda dodania tej właściwości do przeglądarek Firefox i Opera?

Question 2

Wypróbuj ten kod, to zadziała:

-moz-transform: scale(2);

Możesz się do tego odnieść .

Question 3

Zoom i skala transformacji to nie to samo. Są stosowane w różnym czasie. Powiększenie jest stosowane przed renderowaniem, transformacja - po. Rezultatem tego jest to, że jeśli weźmiesz element div o szerokości / wysokości = 100% zagnieżdżony w innym div, ze stałym rozmiarem, jeśli zastosujesz powiększenie, wszystko w wewnętrznym powiększeniu zmniejszy się lub zwiększy, ale jeśli zastosujesz, przekształć cały wewnętrzny div zmniejszy się (nawet jeśli szerokość / wysokość jest ustawiona na 100%, po transformacji nie osiągnie 100%).

Question 4

Dla mnie to działa, aby zrównoważyć różnicę między powiększeniem a przekształceniem skali, dostosuj żądane pochodzenie:

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;

Question 5

Użyj scalezamiast tego! Po wielu badaniach i testach stworzyłem tę wtyczkę, aby osiągnąć to w różnych przeglądarkach:

$.fn.scale = function(x) {
    if(!$(this).filter(':visible').length && x!=1)return $(this);
    if(!$(this).parent().hasClass('scaleContainer')){
        $(this).wrap($('<div class="scaleContainer">').css('position','relative'));
        $(this).data({
            'originalWidth':$(this).width(),
            'originalHeight':$(this).height()});
    }
    $(this).css({
        'transform': 'scale('+x+')',
        '-ms-transform': 'scale('+x+')',
        '-moz-transform': 'scale('+x+')',
        '-webkit-transform': 'scale('+x+')',
        'transform-origin': 'right bottom',
        '-ms-transform-origin': 'right bottom',
        '-moz-transform-origin': 'right bottom',
        '-webkit-transform-origin': 'right bottom',
        'position': 'absolute',
        'bottom': '0',
        'right': '0',
    });
    if(x==1)
        $(this).unwrap().css('position','static');else
            $(this).parent()
                .width($(this).data('originalWidth')*x)
                .height($(this).data('originalHeight')*x);
    return $(this);
};

usege:

$(selector).scale(0.5);

Uwaga:

Stworzy opakowanie z klasą scaleContainer. Dbaj o to podczas stylizacji treści.

Question 6

zoom: 145%;
-moz-transform: scale(1.45);

użyj tego, aby być po bezpieczniejszej stronie

Question 7

Zmieniłbym się zoomna transformwe wszystkich przypadkach, ponieważ, jak wyjaśniają inne odpowiedzi, nie są one równoważne. W moim przypadku konieczne było również zastosowanie transform-originwłasności, aby umieścić przedmioty tam, gdzie chciałem.

To działało dla mnie w Chome, Safari i Firefox:

transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;

Question 8

Nie działa jednakowo we wszystkich przeglądarkach. Poszedłem do: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage i dodałem styl dla powiększenia i -moz-transform. Uruchomiłem ten sam kod na Firefox, IE i Chrome i otrzymałem 3 różne wyniki.

<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock"  />

</body>
</html>

Question 9

Przeklinałem to już od jakiegoś czasu. Zoom na pewno nie jest rozwiązaniami, działa w chrome, działa częściowo w IE, ale przenosi cały div html, firefox nic nie robi.

Moim rozwiązaniem, które zadziałało, było użycie zarówno skalowania, jak i tłumaczenia, a także dodanie pierwotnego wzrostu i wagi, a następnie ustawienie wysokości i wagi samego elementu div:

#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;

Oczywiście zmień je na własne potrzeby. Dało mi to ten sam wynik we wszystkich przeglądarkach.

Question 10

wypróbuj ten kod, aby powiększyć całą stronę w programie Firefox

-moz-transform: scale(2);

jeśli używam tego kodu, cała strona przeskalowana za pomocą przewijania y i x nie jest odpowiednio powiększona

so Sorry to say fireFox not working well using "-moz-transform: scale(2);"

**

Po prostu nie możesz powiększyć swojej strony za pomocą css w przeglądarce Firefox

**

Question 11

czy to działa poprawnie dla Ciebie? :

zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);

Question 12

U mnie to działa dobrze z IE10, Chrome, Firefox i Safari:

   #MyDiv>*
   {
        zoom: 50%;
        -moz-transform: scale(0.5);
        -webkit-transform: scale(1.0);
   }

To powiększa całą zawartość do 50%.

Question 13

Jedyną poprawną i zgodną z W3C odpowiedzią jest: <html> obiekt i rem. transformacja nie działa poprawnie, jeśli skalujesz w dół (na przykład skala (0,5).

Posługiwać się:

html
{
   font-size: 1mm; /* or your favorite unit */
}

i użyj w swoim kodzie jednostki „rem” (w tym style dla <body>) zamiast jednostek metrycznych. „%” s bez zmian. Dla każdego tła ustaw rozmiar tła. Zdefiniuj rozmiar czcionki dla treści, która jest dziedziczona przez inne elementy.

jeśli wystąpi jakikolwiek warunek, który uruchomi zoom inny niż 1.0, zmień rozmiar czcionki dla tagu (przez CSS lub JS).

na przykład:

@media screen and (max-width:320pt)
{
   html
   {
      font-size: 0.5mm; 
   }
}

To sprawia, że odpowiednik powiększenia: 0.5 bez problemów w JS z clientX i pozycjonowaniem podczas zdarzeń przeciągnij-upuść.

Nie używaj „rem” w zapytaniach o media.

Naprawdę nie potrzebujesz powiększenia, ale w niektórych przypadkach może to być szybsza metoda dla istniejących witryn.