如何在Firefox和Opera中缩放HTML元素?
zoom
财产正在IE,谷歌Chrome和Safari中运行,但它不适用于Firefox和Opera。
是否有任何方法可以将此属性添加到Firefox和Opera?
对我来说,这适用于IE10,Chrome,Firefox和Safari:
#MyDiv>*
{
zoom: 50%;
-moz-transform: scale(0.5);
-webkit-transform: scale(1.0);
}
这会将所有内容缩放到50%。
我一直在咒骂这一段时间。 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;
显然根据自己的需要改变这些。它在所有浏览器中给出了相同的结果。
只有正确和W3C兼容的答案是:<html>
object和rem。如果缩小(例如,缩放(0.5)),则转换无法正常工作。
使用:
html
{
font-size: 1mm; /* or your favorite unit */
}
并在代码“rem”单位(包括<body>
的样式)中使用,而不是公制单位。 “%”没有变化。对于所有背景设置背景大小。定义body的font-size,由其他元素继承。
如果发生任何条件,将触发1.0以外的缩放,更改标签的字体大小(通过CSS或JS)。
例如:
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
这相当于zoom:0.5在没有问题的JS中使用clientX和拖放事件期间的定位。
不要在媒体查询中使用“rem”。
你真的不需要缩放,但在某些情况下,它可以更快地为现有网站的方法。
缩放和变换比例不是一回事。它们在不同时间应用。在渲染发生之前应用缩放,转换 - 之后。这样做的结果是如果你把一个宽度/高度= 100%的div嵌套在另一个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
!经过多次研究和测试,我已经制作了这个插件来实现跨浏览器:
$.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
类的包装器。在设计内容时要注意这一点。
zoom: 145%;
-moz-transform: scale(1.45);
使用它是在更安全的一面
我会在所有情况下改变zoom
为transform
,因为正如其他答案所解释的那样,它们并不等同。在我的情况下,还有必要应用transform-origin
属性将项目放在我想要的地方。
这适用于Chrome,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并添加了缩放和-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>
试试这段代码来放大fireFox中的整个页面
-moz-transform: scale(2);
如果我使用此代码,整个页面缩放y和x滚动不正确缩放
so Sorry to say fireFox not working well using "-moz-transform: scale(2);"
**
您只能在fireFox中使用css缩放页面
**
这对你有效吗? :
zoom: 145%;
-moz-transform: scale(1.45);
-webkit-transform: scale(1.45);
scale(1.45);
transform: scale(1.45);