如何在Firefox和Opera中放大HTML元素？
如何在Firefox和Opera中放大HTML元素？
zoom属性在IE，谷歌浏览器和Safari浏览器中工作，但它不适用于Firefox和Opera。
有什么方法可以将这个属性添加到Firefox和Opera？
试试这个代码，这将工作：
-moz-transform: scale(2);
你可以参考这个 。
缩放和变换比例是不一样的。 他们在不同的时间适用。 在渲染发生之前应用缩放，在之后进行变换。 这样做的结果是，如果您将宽度/高度= 100％的divembedded另一个div的内部（具有固定大小），如果应用缩放，内部缩放中的所有内容都将缩小或增大，但如果应用转换整个内部div将缩小（即使宽度/高度设置为100％，但转换后不会达到100％）。
对我来说，这可以解决缩放和缩放变换之间的差异，根据所需的原点进行调整：
zoom: 0.5; -ms-zoom: 0.5; -webkit-zoom: 0.5; -moz-transform: scale(0.5,0.5); -moz-transform-origin: left center;
反而使用scale ！ 经过多次的研究和testing，我已经使这个插件实现了跨浏览器：
$.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);
注意：
它将创build一个类scaleContainer的包装。 在devise内容时要注意这一点。
zoom: 145%; -moz-transform: scale(1.45);
使用这个更安全的一面
我会在所有情况下更改transform zoom比例，因为正如其他答案所解释的那样，它们并不等同。 在我的情况下，也有必要应用transform-origin属性来放置我想要的项目。
这在Chome，Safari和Firefox中适用于我：
transform: scale(0.4); transform-origin: top left; -moz-transform: scale(0.4); -moz-transform-origin: top left;
它在所有浏览器中都不能以统一的方式工作。 我去了： http : //www.w3schools.com/html/tryit.asp? filename=tryhtml_pulpitimage并添加了zoom和-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="http://img.dovov.compulpit.jpg" alt="Pulpit rock" /> </body> </html>
这是否正确地为你工作？ ：
zoom: 145%; -moz-transform: scale(1.45); -webkit-transform: scale(1.45); scale(1.45); transform: scale(1.45);
对我来说，这与IE10，Chrome，Firefox和Safari一起使用效果很好：
#MyDiv>* { zoom: 50%; -moz-transform: scale(0.5); -webkit-transform: scale(1.0); }
将所有内容放大到50％。
我一直在这里发誓。 缩放绝对不是解决scheme，它在Chrome中工作，它在IE中部分工作，但移动整个html div，firefox does not做一件事情。
我的解决scheme对我来说是同时使用缩放和翻译，并且还添加了原始的高度和重量，然后设置div的高度和重量本身：
#miniPreview { transform: translate(-710px, -1000px) rotate(0rad) skewX(0rad) scale(0.3, 0.3); transform-origin: 1010px 1429px 0px; width: 337px; height: 476px;
显然这些改变是为了你自己的需要。 它给了我所有的浏览器相同的结果。
只有正确的和W3C兼容的答案是： <html> object和rem。 如果缩小（例如缩放（0.5）），转换将无法正常工作。
使用：
html { font-size: 1mm; /* or your favorite unit */ }
并在代码中使用“rem”单位（包括<body>样式），而不是公制单位。 “％”没有改变。 为所有背景设置背景大小。 定义正文的字体大小，由其他元素inheritance。
如果发生任何情况，应该放大1.0以外的变焦，改变标签的字体大小（通过CSS或JS）。
例如：
@media screen and (max-width:320pt) { html { font-size: 0.5mm; } }
这使得相当于zoom：0.5没有问题与JS客户端和定位在拖放事件。
在媒体查询中不要使用“rem”。
你真的不需要缩放，但在某些情况下，它可以为现有的网站更快的方法。
