it-swarm.com.de

komplette Stile für den Browserübergreifenden CSS-Zoom

Ich finde es schwierig, Browser-übergreifende CSS-Zoom-Eigenschaften zu erhalten. Was ich nur habe

zoom: 2;
-moz-transform: scale(2);
19
Hello World

Diese werden für den Cross-Browser ausreichen ...

Demo

Hinweis: Da @martin darauf hinweist, dass dies funktioniert möglicherweise nicht als Beabsichtigt, bedeutet dies nicht, dass dies fehlschlägt. Chrome macht es nur 2x größer als andere Browser, weil es auch zoom Eigenschaft RESPECTS. Also macht es 2x größer ...

zoom: 2; /* IE */
-moz-transform: scale(2); /* Firefox */
-moz-transform-Origin: 0 0;
-o-transform: scale(2); /* Opera */
-o-transform-Origin: 0 0;
-webkit-transform: scale(2); /* Safari And Chrome */
-webkit-transform-Origin: 0 0;
transform: scale(2); /* Standard Property */
transform-Origin: 0 0;  /* Standard Property */

HTML

<div class="zoom">BlahBlah</div>

CSS

.zoom {
    zoom: 2;
    -moz-transform: scale(2);
    -moz-transform-Origin: 0 0;
    -o-transform: scale(2);
    -o-transform-Origin: 0 0;
    -webkit-transform: scale(2);
    -webkit-transform-Origin: 0 0;
    transform: scale(2); /* Standard Property */
    transform-Origin: 0 0;  /* Standard Property */
}
40
Mr. Alien

Hier ist eine Nur-CSS-Lösung

.csszoom{
        -ms-transform: scale(1.5); /* IE 9 */
        -ms-transform-Origin: 0 0;
        -moz-transform: scale(1.5); /* Firefox */
        -moz-transform-Origin: 0 0;
        -o-transform: scale(1.5); /* Opera */
        -o-transform-Origin: 0 0;
        -webkit-transform: scale(1.5); /* Safari And Chrome */
        -webkit-transform-Origin: 0 0;
        transform: scale(1.5); /* Standard Property */
        transform-Origin: 0 0;  /* Standard Property */
}
.ie8 .csszoom{
        zoom:1.5;
}

Ändern Sie den HTML-Tag in

<!--[if lte IE 8]> <html class="ie8"> <![endif]--> 
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
4
aWebDeveloper

Wenn Skripte möglich sind, können Sie sowohl die Kollision mehrerer unterstützter Zoom-Eigenschaften als auch das Browser-Sniffing durch die Verwendung zukunftssicherer Funktionserkennung vermeiden.
Hinweis: Ich benutze hier jQuery aus Bequemlichkeitsgründen, aber es könnte auch ohne geschrieben werden.

CSS:

.zoom {
    -moz-transform-Origin: 0 0;
    -o-transform-Origin: 0 0;
    -webkit-transform-Origin: 0 0;
}

HTML:

<div class="mySelectorClass">Foobar</div>

Skript (Einmalige Initialisierung)

var strPropZoom = "zoom";
var blnPropZoomUseScale = false;

$(function() {
    var jqBody = $("body");

    // Determine the supported 'zoom' method
    switch (true) {
        case Boolean(jqBody.css("zoom"))              : break;
        case Boolean(jqBody.css("-moz-transform"))    : strPropNameZoom = "-moz-transform";    blnPropZoomUseScale = true; break;
        case Boolean(jqBody.css("-o-transform"))      : strPropNameZoom = "-o-transform";      blnPropZoomUseScale = true; break;
        case Boolean(jqBody.css("-webkit-transform")) : strPropNameZoom = "-webkit-transform"; blnPropZoomUseScale = true; break;
    }
})

Wenn dann Zoomen erforderlich ist, rufen Sie einfach Folgendes auf:

var intZoom = 2.5; // NB: This could be calculated depending on window dimensions
$(".mySelectorClass")
    .css(
        strPropZoom
        ,(blnPropZoomUseScale ? "scale(" + intZoom + ")" : intZoom)
    )
    .addClass("zoom");
1
Andrew Urquhart

In Beantwortung des obigen Kommentars von @martin (er ist korrekt) habe ich eine komplizierte Problemumgehung mithilfe von Javascript (einschließlich einiger jQuery) und einiger von @ Mr erstellt. Aliens css. Ohne Frage gibt es andere Möglichkeiten, dies zu erreichen - vielleicht einfacher, aber die folgende js- und css-Kombination funktioniert für mich:

css

.zoom{
   -moz-transform: scale(2); /* Firefox */
   -moz-transform-Origin: 0 0;
   -o-transform: scale(2); /* Opera */
   -o-transform-Origin: 0 0;
   zoom:2 /*IE*/;
 }
//Notice the absence of any Webkit Transforms

javascript

(function($){
    var version=false,
    isSafari=Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0,
    isOpera=!!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0,
    isChrome=!!window.chrome && !isOpera;
    if(isChrome){
        version=(window.navigator.appVersion.match(/Chrome\/(\d+)\./)!==null) ?
        parseInt(window.navigator.appVersion.match(/Chrome\/(\d+)\./)[1], 10) :
        0;
        version=(version >= 10) ? true : false;
        // Don't know what version they switched it.  Figured that this was a good guess
    }
    // I added the extra ternary check in there because when testing in Chrome,
    // if I switched the user agent in the overrides section, it kept failing with 
    // null value for version.

    if(isSafari || version){
    $('.zoom').css('-webkit-transform','scale(2)');
    $('.zoom').css('-webkit-transform-Origin','0 0');
        // If Scaling based upon different resolutions, a check could be included here
        // for window size, and the css could be adjusted accordingly.
    }
}(jQuery))

Der Browser-Erkennungscode stammt aus hier und das Chrome-Versionserkennungs-Snippet stammt aus diesem Beitrag .

0
dgo