跨浏览器CSS缩放的完整样式_Css_Cross Browser_Zooming

跨浏览器CSS缩放的完整样式

css

跨浏览器CSS缩放的完整样式,css,cross-browser,zooming,Css,Cross Browser,Zooming,我发现很难获得完全跨浏览器的CSS缩放属性。我只有这些 zoom: 2; -moz-transform: scale(2); 这些将足以用于跨浏览器注：正如所指出的，这可能不起作用这并不意味着它会失败，Chrome只是让它变大了2倍与其他浏览器不同，因为它也尊重zoom属性。所以它使它变大了2倍 HTML 为了回应@martin的上述评论（他是正确的），我使用javascript（包括一些jQuery）和@Mr.Alien的一些css创建了一个复杂的解决方案。毫无疑问，还有其他方法可以

我发现很难获得完全跨浏览器的CSS缩放属性。我只有这些

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

这些将足以用于跨浏览器

注：正如所指出的，这可能不起作用这并不意味着它会失败，Chrome只是让它变大了2倍与其他浏览器不同，因为它也尊重

zoom

属性。所以它使它变大了2倍

HTML

为了回应@martin的上述评论（他是正确的），我使用javascript（包括一些jQuery）和@Mr.Alien的一些css创建了一个复杂的解决方案。毫无疑问，还有其他方法可以做到这一点——也许更简单，但以下js和css组合对我来说很有用：

css

javascript

浏览器检测代码来自，Chrome版本检测代码片段来自。

如果脚本编写是可行的，那么您可以通过使用经得起未来考验的功能检测来避免多个支持的缩放属性的冲突和浏览器嗅探。
注意：我在这里使用jQuery是为了方便，但是没有它也可以写

CSS: HTML: 然后，当需要缩放时，只需调用：

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

这里是一个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;
}

将HTML标记更改为

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

今天的答案似乎是

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

那是一个拥抱

不幸的是，这不会像预期的那样起作用。现代Chrome将同时应用变焦和比例，使其达到4倍大@martin任何webkit端口实际上都会这样做

zoom

是从Safari 4开始的。是的，如果您可以抛弃IE7及以下版本，您可能可以放弃zoom并使用-ms zoom供应商前缀（如果内存可用，IE8+中支持）。随着Webkit的普及，我想说的是，最好不要提供市场份额约为0.1%的随机浏览器缩放功能，并且完全支持Webkit。您还可以添加-ms应该已经阅读了评论。是的，Chrome将通过使用缩放和变换将其加倍。我倾向于使用纯css3变换比例，以及针对IE的特殊样式表（带有条件注释）。是的……这会更容易。没有那么聪明，但肯定更好。：）

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

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

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

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

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

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