Question

如何在Firefox和Opera中缩放HTML元素？

zoom媒体资源适用于IE，谷歌浏览器和Safari，但它在Firefox和Opera中无效。

是否有任何方法可以将此属性添加到Firefox和Opera？

Answer 1

试试这段代码，这样就可以了：

-moz-transform: scale(2);

您可以参考this。

Answer 2

缩放和变换比例不是一回事。它们在不同时间应用。在渲染发生之前应用缩放，转换 - 之后。这样做的结果是如果你把一个宽度/高度= 100％的div嵌套在另一个div的内部，固定大小，如果你应用缩放，内部缩放内的所有东西都会缩小或增长，但如果你应用变换你的整个内部div会缩小（即使宽度/高度设置为100％，转换后它们也不会是100％）。

Answer 3

对我来说，这可以对抗缩放和缩放变换之间的差异，调整所需的目标原点：

zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform:  scale(0.5,0.5);
-moz-transform-origin: left center;

Answer 4

使用scale代替！经过多次研究和测试后，我已经制作了这个插件来实现跨浏览器：

$.fn.scale = function(x) {
    if(!$(this).filter(':visible').length && x!=1)return $(this);
    if(!$(this).parent().hasClass('scaleContainer')){
        $(this).wrap($('<div class="scaleContainer">').css('position','relative'));
        $(this).data({
            'originalWidth':$(this).width(),
            'originalHeight':$(this).height()});
    }
    $(this).css({
        'transform': 'scale('+x+')',
        '-ms-transform': 'scale('+x+')',
        '-moz-transform': 'scale('+x+')',
        '-webkit-transform': 'scale('+x+')',
        'transform-origin': 'right bottom',
        '-ms-transform-origin': 'right bottom',
        '-moz-transform-origin': 'right bottom',
        '-webkit-transform-origin': 'right bottom',
        'position': 'absolute',
        'bottom': '0',
        'right': '0',
    });
    if(x==1)
        $(this).unwrap().css('position','static');else
            $(this).parent()
                .width($(this).data('originalWidth')*x)
                .height($(this).data('originalHeight')*x);
    return $(this);
};

usege：

$(selector).scale(0.5);

请注意：

它将创建一个包含类scaleContainer的包装器。在设计内容时要注意这一点。

Answer 5

zoom: 145%;
-moz-transform: scale(1.45);

将其用于更安全的一面

Answer 6

在所有情况下，我都会更改zoom transform，因为正如其他答案所解释的那样，它们并不等同。在我的情况下，还需要应用transform-origin属性将项目放在我想要的位置。

这适用于Chome，Safari和Firefox：

transform: scale(0.4);
transform-origin: top left;
-moz-transform: scale(0.4);
-moz-transform-origin: top left;

Answer 7

它在所有浏览器中都不能以统一的方式工作。我去了：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage并添加了缩放和-moz-transform的样式。我在firefox，IE和chrome上运行了相同的代码，得到了3个不同的结果。

<html>
<style>
body{zoom:3;-moz-transform: scale(3);}
</style>
<body>

<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" alt="Pulpit rock"  />

</body>
</html>

Answer 8

尝试使用此代码在fireFox中缩放整个页面

-moz-transform: scale(2);

如果我使用此代码，则整个页面用y和x缩放无法正确缩放

so Sorry to say fireFox not working well using "-moz-transform: scale(2);"

**

根本无法在fireFox中使用CSS缩放页面

**

Answer 9

这对你有效吗？：

zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);

Answer 10

对我而言，这适用于IE10，Chrome，Firefox和Safari：

   #MyDiv>*
   {
        zoom: 50%;
        -moz-transform: scale(0.5);
        -webkit-transform: scale(1.0);
   }

这会将所有内容缩放到50％。

Answer 11

我一直在咒骂这一段时间。缩放绝对不是解决方案，它在chrome中工作，它在IE中部分工作但是移动了整个html div，firefox没有做任何事情。

我的解决方案对我有用，既使用缩放和翻译，又添加原始高度和重量，然后设置div本身的高度和重量：

#miniPreview {
transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3);
transform-origin: 1010px 1429px 0px;
width: 337px;
height: 476px;

显然根据自己的需要改变这些。它在所有浏览器中都给出了相同的结果。

Answer 12

只有正确和W3C兼容的答案是：<html> object和rem。如果缩小比例，转换不能正常工作（例如比例（0.5）。

使用：

html
{
   font-size: 1mm; /* or your favorite unit */
}

并在您的代码中使用＆＃34; rem＆＃34;单位（包括<body>的样式）而非公制单位。＆＃34;％＆＃34; s没有变化。对于所有背景设置背景大小。定义body的font-size，由其他元素继承。

如果发生任何条件，应该触发1.0以外的缩放，更改标签的字体大小（通过CSS或JS）。

例如：

@media screen and (max-width:320pt)
{
   html
   {
      font-size: 0.5mm; 
   }
}

这相当于zoom：0.5在没有问题的JS中使用clientX并在拖放事件期间进行定位。

不要使用＆＃34; rem＆＃34;在媒体查询中。

您确实不需要缩放，但在某些情况下，它可以更快地为现有网站提供方法。

如何在Firefox和Opera中缩放HTML元素？

12 个答案: