如何在Firefox和Opera中缩放HTML元素?
该zoom
属性可以在IE,Google Chrome和Safari中使用,但不能在Firefox和Opera中使用。
有什么方法可以将此属性添加到Firefox和Opera?
Answers:
缩放和缩放比例不一样。它们在不同的时间应用。在渲染发生之前应用缩放,然后进行转换。这样的结果是,如果您将一个宽度/高度= 100%的div嵌套在另一个div内,并且具有固定的大小,则如果应用缩放,则内部缩放中的所有内容都会缩小或增长,但是如果应用,则变换整个inner div会缩小(即使将width / height设置为100%,也不会在转换后变为100%)。
使用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)
并非在所有浏览器中都以统一的方式工作。我去了: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>
我已经对此发誓了一段时间。缩放绝对不是解决方案,它可以在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。如果缩小比例,转换将无法正常进行(例如scale(0.5)。
使用:
html
{
font-size: 1mm; /* or your favorite unit */
}
并在您的代码“ rem”单位(包括中的样式<body>
)中使用公制单位。“%”没有变化。为所有背景设置background-size。定义主体的字体大小,该大小由其他元素继承。
如果发生任何情况将触发除1.0以外的缩放,请更改标签的字体大小(通过CSS或JS)。
例如:
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
这使得zoom:0.5等效,而在使用clientX的JS中没有问题,并且在拖放事件期间没有定位。
不要在媒体查询中使用“ rem”。
您确实不需要缩放,但是在某些情况下,它可以更快地处理现有网站。