Je trouve qu'il est difficile d'obtenir des propriétés de zoom CSS croisées entre navigateurs.
zoom: 2;
-moz-transform: scale(2);
Celles-ci seront suffisantes pour les navigateurs croisés ...
Remarque: Comme @martin a souligné que cela pourrait ne pas fonctionner comme. prévu, cela ne signifie pas que cela échoue, Chrome le rend simplement 2x plus grand. que les autres navigateurs, car il respecte également la propriété
zoom
. Donc, ça fait 2x plus gros ...
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 */
}
Voici une seule solution css
.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;
}
Changer la balise HTML en
<!--[if lte IE 8]> <html class="ie8"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js"> <!--<![endif]-->
Si la création de scripts est réalisable, vous pouvez éviter la collision de plusieurs propriétés de zoom prises en charge et le reniflement du navigateur en utilisant la détection de fonctions évolutives.
Note: J'utilise jQuery ici pour plus de commodité, mais il pourrait être écrit sans cela.
.zoom {
-moz-transform-Origin: 0 0;
-o-transform-Origin: 0 0;
-webkit-transform-Origin: 0 0;
}
<div class="mySelectorClass">Foobar</div>
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;
}
})
Ensuite, lorsque le zoom est requis, appelez simplement:
var intZoom = 2.5; // NB: This could be calculated depending on window dimensions
$(".mySelectorClass")
.css(
strPropZoom
,(blnPropZoomUseScale ? "scale(" + intZoom + ")" : intZoom)
)
.addClass("zoom");
En réponse au commentaire ci-dessus de @martin (il a raison), j'ai créé une solution de contournement complexe à l'aide de javascript (y compris certains jQuery) et de certains de @Mr. Alien's css. Incontestablement, il existe d'autres moyens d'y parvenir - peut-être plus simple, mais les combinaisons js et css suivantes fonctionnent pour moi:
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))
Le code de détection du navigateur provient de ici et l'extrait de détection de la version Chrome provient de cet article .