Komplette Stile für den browserübergreifenden CSS-Zoom

Ich finde es schwer zu bekommen ist voll cross-browser CSS-zoom-Eigenschaften ..was ich habe ist nur diese

zoom: 2;
-moz-transform: scale(2);

InformationsquelleAutor der Frage Hello World | 2012-11-15

  1. 37

    Werden diese ausreichend für die cross-browser...

    Demo

    Hinweis: Als @martin wies darauf hin, dass das kann nicht funktionieren, da
    soll    , bedeutet nicht, dass diese ausfällt, Chrome macht es nur 2x größer
    als andere Browser, weil es RESPEKTIERT zoom Eigenschaft als gut. So 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 */
}

    InformationsquelleAutor der Antwort Mr. Alien

  2. 3

    Hier ist eine 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-HTML-tag

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

    InformationsquelleAutor der Antwort aWebDeveloper

  3. 1

    Wenn scripting möglich ist, so können Sie vermeiden, die Kollision von mehreren unterstützt zoom-Eigenschaften und die browser-sniffing durch die Verwendung von future-proof-feature-Erkennung.
    Hinweis: ich bin mit jQuery hier für die Bequemlichkeit, aber es könnte geschrieben werden, ohne dass es.

    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;
    }
})

    Dann beim Zoomen erforderlich ist, einfach aufrufen:

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

    InformationsquelleAutor der Antwort Andrew Urquhart

  4. 0

    In der Antwort auf den obigen Kommentar von @martin (er hat Recht), habe ich einen komplizierten workaround mit javascript (enthält einige jQuery) und einige @Mr. Alien ' s css. Zweifellos, es gibt andere Wege, dies zu erreichen - vielleicht auch einfacher, aber Folgendes js und css-combo für mich funktioniert:

    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))

    Browser detection code kam aus hier und der Chrom-version-Erkennung snippet kam aus dieser Beitrag.

    InformationsquelleAutor der Antwort user1167442

  5. -2

    Scheint, wie die Antwort heute ist

    .zoom {
     zoom: 2; /* Chrome */
     transform: scale(2); /* FF, neglected by Chrome */
     transform-origin: 0;
}

    Ist ein clinch. 😉

    InformationsquelleAutor der Antwort Leo

Schreibe einen Kommentar