¿Cómo puedo ampliar un elemento HTML en Firefox y Opera?

Question 1

La zoompropiedad funciona en IE, Google Chrome y Safari, pero no funciona en Firefox y Opera.

¿Existe algún método para agregar esta propiedad a Firefox y Opera?

Question 2

Prueba este código, esto funcionará:

-moz-transform: scale(2);

Puede hacer referencia a esto .

Question 3

Zoom y escala de transformación no son lo mismo. Se aplican en diferentes momentos. El zoom se aplica antes de que ocurra el renderizado, transform - after. El resultado de esto es que si toma un div con ancho / alto = 100% anidado dentro de otro div, con tamaño fijo, si aplica el zoom, todo dentro de su zoom interno se encogerá o crecerá, pero si aplica transforma todo su El div interno se encogerá (aunque el ancho / alto esté establecido en 100%, no lo serán al 100% después de la transformación).

Question 4

Para mí, esto funciona para contrarrestar la diferencia entre el zoom y la transformación de escala, ajuste para el origen deseado deseado:

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

¡Úselo en su scalelugar! Después de muchas investigaciones y pruebas, hice este complemento para lograrlo en todos los navegadores:

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

Nota:

Creará un contenedor con una clase scaleContainer. Ocúpate de eso mientras estilizas el contenido.

Question 6

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

usa esto para estar en el lado más seguro

Question 7

Cambiaría zoompor transformen todos los casos porque, como explican otras respuestas, no son equivalentes. En mi caso también fue necesario aplicar transform-originpropiedad para colocar los artículos donde quería.

Esto funcionó para mí en Chome, Safari y Firefox:

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

Question 8

No funciona de manera uniforme en todos los navegadores. Fui a: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage y agregué estilo para zoom y -moz-transform. Ejecuté el mismo código en Firefox, IE y Chrome y obtuve 3 resultados diferentes.

<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

He estado maldiciendo esto por un tiempo. Zoom definitivamente no es la solución, funciona en Chrome, funciona parcialmente en IE pero mueve todo el div html, Firefox no hace nada.

Mi solución que funcionó para mí fue usar una escala y una traducción, y también agregar la altura y el peso originales y luego establecer la altura y el peso del div en sí:

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

Obviamente, cámbielos a sus propias necesidades. Me dio el mismo resultado en todos los navegadores.

Question 10

prueba este código para hacer zoom en toda la página en fireFox

-moz-transform: scale(2);

si estoy usando este código, toda la página escalada con el desplazamiento yyx no se amplía correctamente

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

**

Simplemente no puede hacer zoom en su página usando css en fireFox

**

Question 11

¿Funciona esto correctamente para usted? :

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

Question 12

Para mí, esto funciona bien con IE10, Chrome, Firefox y Safari:

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

Esto acerca todo el contenido al 50%.

Question 13

La única respuesta correcta y compatible con W3C es: <html>objeto y rem. la transformación no funciona correctamente si reduce la escala (por ejemplo, escala (0.5).

Utilizar:

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

y use en su código la unidad "rem" (incluidos los estilos para <body>) en lugar de unidades métricas. "%" s sin cambios. Para todos los fondos, establezca el tamaño del fondo. Defina el tamaño de fuente para el cuerpo, que es heredado por otros elementos.

si ocurre alguna condición que disparará el zoom que no sea 1.0, cambie el tamaño de fuente de la etiqueta (a través de CSS o JS).

por ejemplo:

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

Esto equivale a zoom: 0.5 sin problemas en JS con clientX y posicionamiento durante eventos de arrastrar y soltar.

No utilice "rem" en las consultas de medios.

Realmente no necesita zoom, pero en algunos casos puede ser un método más rápido para sitios existentes.