complete styles for cross browser CSS zoom

后端未结

关注

 5  984

I am finding it hard to get fully cross browser CSS zoom properties ..what I\'ve is only these

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

CSS:

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

HTML:

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

Script (One-Off Initialisation)

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

Then when zooming is required simply invoke:

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

0 讨论(0)

南旧

2020-11-28 05:34

In response to the above comment by @martin (he is correct), I created a complicated workaround using javascript (includes some jQuery) and some of @Mr. Alien's css. Unquestionably, there are other ways to accomplish this - perhaps simpler, but, the following js and css combo works for me:

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

The browser detection code came from here and the Chrome version detection snippet came from this post.

0 讨论(0)

情书的邮戳

2020-11-28 05:40

Here is a css only solution

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

Change HTML tag to

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

0 讨论(0)

南笙

2020-11-28 05:42

These will be sufficient for cross browser...

Demo

Note: As @martin pointed out that this may not work as intended, doesn't mean this fails, Chrome just makes it 2x larger than other browsers, because it RESPECTS zoom property as well. So it makes it 2x larger...

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 */
}

0 讨论(0)

栀梦

2020-11-28 05:50

Seems like the answer today is

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

That is a clinch. ;-)

0 讨论(0)