如何在 Firefox 和 Opera 中缩放 HTML 元素？
Posted
技术标签:
【中文标题】如何在 Firefox 和 Opera 中缩放 HTML 元素？【英文标题】：How can I zoom an HTML element in Firefox and Opera? 【发布时间】：2011-05-02 06:00:52 【问题描述】：zoom 属性在 IE、Google Chrome 和 Safari 中有效，但在 Firefox 和 Opera 中无效。
有什么方法可以将此属性添加到 Firefox 和 Opera 中吗？
【问题讨论】：
我会把你推荐给this question，它会非常彻底地回答你的问题。 【参考方案1】：试试这段代码，这会奏效：
-moz-transform: scale(2);
您可以参考this。
【讨论】：
是的，这是完美的。有什么方法可以将 -moz-transform 比例因子更改为百分比 十进制百分比。 (1 = 100% 2 = 200% 0.2 = 20%) 但我相信你也可以使用百分比表示法。 w3.org/TR/css3-values/#percentages 这个问题是当你有固定位置的元素时。缩放的工作方式与变换比例不同。 另外...当 ff 支持缩放时会发生什么？这会放大倍数吗？这似乎不是 imo 的解决方案。 这不适用于精灵图像，但我们实际上需要放大图像的特定部分。【参考方案2】：它并非在所有浏览器中都以统一的方式工作。 我去了：http://www.w3schools.com/html/tryit.asp?filename=tryhtml_pulpitimage 并添加了缩放和-moz-transform 的样式。我在 firefox、IE 和 chrome 上运行了相同的代码，得到了 3 个不同的结果。
<html>
<style>
bodyzoom:3;-moz-transform: scale(3);
</style>
<body>
<h2>Norwegian Mountain Trip</h2>
<img border="0" src="/images/pulpit.jpg" />
</body>
</html>
【讨论】：
【参考方案3】：zoom: 145%;
-moz-transform: scale(1.45);
使用它来更安全
【讨论】：
这会在 webkit 中放大 2 倍。放大拳头，按比例尺秒【参考方案4】：缩放和变换比例不是一回事。它们在不同的时间应用。缩放在渲染发生之前应用，变换 - 之后。这样做的结果是，如果您将宽度/高度 = 100% 的 div 嵌套在另一个 div 中，并且大小固定，如果您应用缩放，则内部缩放中的所有内容都会缩小或增长，但如果您应用变换整个内部 div 会缩小（即使宽度/高度设置为 100%，但在转换后它们不会是 100%）。
【讨论】：
【参考方案5】：这是否适合您？ ：
zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);
【讨论】：
【参考方案6】：对我来说，这适用于 IE10、Chrome、Firefox 和 Safari：
#MyDiv>*
zoom: 50%;
-moz-transform: scale(0.5);
-webkit-transform: scale(1.0);
这会将所有内容放大到 50%。
【讨论】：
【参考方案7】：对我来说，这可以抵消缩放和缩放变换之间的差异，调整所需的预期原点：
zoom: 0.5;
-ms-zoom: 0.5;
-webkit-zoom: 0.5;
-moz-transform: scale(0.5,0.5);
-moz-transform-origin: left center;
【讨论】：
【参考方案8】：请改用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);
;
使用：
$(selector).scale(0.5);
注意：
它将创建一个带有 scaleContainer 类的包装器。在设计内容时注意这一点。
【讨论】：
您可以通过处理缩放元素的边框宽度来使这更加棒。.width($(this).data('originalWidth') * x + borderWidth)【参考方案9】：
我已经为此发誓有一段时间了。 Zoom 绝对不是解决方案，它在 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;
显然根据您自己的需要更改这些内容。它在所有浏览器中都给了我相同的结果。
【讨论】：
这是唯一正确的答案！单独缩放不会改变元素的原始大小。 这是帮助我解决问题的唯一答案，即我想在保持相同宽度的同时放大/缩小元素，以便更多更小的元素可以放在同一行。我所要做的就是将 CSS 宽度 % 缩放为与 CSS 比例因子成反比【参考方案10】：在所有情况下，我都会将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;
【讨论】：
【参考方案11】：只有正确且与 W3C 兼容的答案是：<html> object 和 rem。如果按比例缩小（例如 scale(0.5)），转换将无法正常工作。
用途：
html
font-size: 1mm; /* or your favorite unit */
并在您的代码中使用“rem”单位（包括<body> 的样式）而不是公制单位。 "%"s 没有变化。为所有背景设置背景大小。定义body的font-size，由其他元素继承。
如果发生任何会触发缩放而不是 1.0 的情况，请更改标记的字体大小（通过 CSS 或 JS）。
例如：
@media screen and (max-width:320pt)
html
font-size: 0.5mm;
这相当于 zoom:0.5 在带有 clientX 和拖放事件定位的 JS 中没有问题。
不要在媒体查询中使用“rem”。
您确实不需要缩放，但在某些情况下，它可以为现有网站提供更快的方法。
【讨论】：
【参考方案12】：尝试使用此代码在 fireFox 中缩放整个页面
-moz-transform: scale(2);
如果我使用此代码，则整个页面用 y 和 x 滚动无法正确缩放
so Sorry to say fireFox not working well using "-moz-transform: scale(2);"
**
只是你不能在 fireFox 中使用 css 来缩放你的页面
**
【讨论】：
以上是关于如何在 Firefox 和 Opera 中缩放 HTML 元素？的主要内容，如果未能解决你的问题，请参考以下文章
在 Firefox 中使用 CSS Scale 时，元素保持原始位置
.webm 视频可在 Chrome 和 Opera 中播放，但不能在 Firefox 中播放
我如何只能在任何现代浏览器（如 chrome、firefox、safari、opera、IE 以及任何版本的通用 javascript [重复]）中关闭当前选项卡