Wie kann ich ein HTML-Element in Firefox und Opera zoomen?
Die zoomEigenschaft funktioniert in IE, Google Chrome und Safari, aber nicht in Firefox und Opera.
Gibt es eine Methode zum Hinzufügen dieser Eigenschaft zu Firefox und Opera?
Wie kann ich ein HTML-Element in Firefox und Opera zoomen?
Die zoomEigenschaft funktioniert in IE, Google Chrome und Safari, aber nicht in Firefox und Opera.
Gibt es eine Methode zum Hinzufügen dieser Eigenschaft zu Firefox und Opera?
Antworten:
Versuchen Sie diesen Code, das wird funktionieren:
-moz-transform: scale(2);
Sie können verweisen diese .
Zoom und Transformationsskala sind nicht dasselbe. Sie werden zu unterschiedlichen Zeiten angewendet. Der Zoom wird angewendet, bevor das Rendern erfolgt, transformieren - danach. Das Ergebnis ist, wenn Sie ein Div mit Breite / Höhe = 100% in einem anderen Div mit fester Größe verschachteln. Wenn Sie den Zoom anwenden, wird alles in Ihrem inneren Zoom kleiner oder größer, aber wenn Sie das anwenden, transformieren Sie Ihr gesamtes Das innere Div wird kleiner (obwohl Breite / Höhe auf 100% eingestellt ist, werden sie nach der Transformation nicht 100% sein).
Verwenden Sie scalestattdessen! Nach vielen Recherchen und Tests habe ich dieses Plugin erstellt, um es browserübergreifend zu erreichen:
$.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);
Hinweis:
Es wird ein Wrapper mit einer Klasse erstellt scaleContainer. Achten Sie darauf, während Sie Inhalte stylen.
.width($(this).data('originalWidth') * x + borderWidth)
zoom: 145%;
-moz-transform: scale(1.45);
Verwenden Sie dies, um auf der sicheren Seite zu sein
Ich würde ändern zoomfür transformin allen Fällen , weil, wie sie von anderen Antworten erklärt, sie sind nicht gleichwertig. In meinem Fall war es auch notwendig, transform-originEigentum anzuwenden , um die Gegenstände dort zu platzieren, wo ich wollte.
Das hat bei mir in Chome, Safari und Firefox funktioniert:
transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;
Es funktioniert nicht in allen Browsern einheitlich. Ich ging zu: http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage und fügte Stil für Zoom und -moz-Transformation hinzu. Ich habe den gleichen Code auf Firefox, IE und Chrome ausgeführt und 3 verschiedene Ergebnisse erhalten.
<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>
Ich habe eine Weile darauf geschworen. Zoom ist definitiv nicht die Lösung, es funktioniert in Chrome, es funktioniert teilweise im IE, aber es bewegt das gesamte HTML-Div, Firefox macht nichts.
Meine Lösung, die für mich funktioniert hat, bestand darin, sowohl eine Skalierung als auch eine Übersetzung zu verwenden, die ursprüngliche Größe und das ursprüngliche Gewicht hinzuzufügen und dann die Größe und das Gewicht des Div selbst festzulegen:
#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;
Ändern Sie diese offensichtlich an Ihre eigenen Bedürfnisse. Es gab mir das gleiche Ergebnis in allen Browsern.
Versuchen Sie diesen Code, um die gesamte Seite in fireFox zu zoomen
-moz-transform: scale(2);
Wenn ich diesen Code verwende, zoomt die gesamte mit y und x skalierte Seite nicht richtig
so Sorry to say fireFox not working well using "-moz-transform: scale(2);"
** **.
Sie können Ihre Seite einfach nicht mit CSS in FireFox zoomen
** **.
Die einzige richtige und W3C-kompatible Antwort lautet: <html> Objekt und Rem. Die Transformation funktioniert nicht richtig, wenn Sie verkleinern (z. B. Skalieren (0,5)).
Verwenden:
html
{
font-size: 1mm; /* or your favorite unit */
}
und verwenden Sie in Ihrem Code "rem" -Einheit (einschließlich Stile für <body>) anstelle von metrischen Einheiten. "%" s ohne Änderungen. Stellen Sie für alle Hintergründe die Hintergrundgröße ein. Definieren Sie die Schriftgröße für den Textkörper, der von anderen Elementen geerbt wird.
Wenn eine Bedingung auftritt, die einen anderen Zoom als 1.0 auslösen soll, ändern Sie die Schriftgröße für das Tag (über CSS oder JS).
zum Beispiel:
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
Dies entspricht Zoom: 0,5 ohne Probleme in JS mit clientX und Positionierung während Drag-Drop-Ereignissen.
Verwenden Sie "rem" nicht in Medienabfragen.
Sie brauchen wirklich keinen Zoom, aber in einigen Fällen kann die Methode für vorhandene Websites schneller sein.