Firefox 및 Opera에서 HTML 요소를 확대하려면 어떻게해야합니까?
이 zoom속성은 IE, Google Chrome 및 Safari에서 작동하지만 Firefox 및 Opera에서는 작동하지 않습니다.
이 속성을 Firefox 및 Opera에 추가하는 방법이 있습니까?
답변:
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. 콘텐츠를 스타일링하는 동안 처리하십시오.
.width($(this).data('originalWidth') * x + borderWidth)
모든 브라우저에서 균일하게 작동하지 않습니다. 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="/images/pulpit.jpg" alt="Pulpit rock" />
</body>
</html>
나는 이것에 대해 한동안 맹세했습니다. Zoom은 확실히 해결책이 아니며 크롬에서 작동하며 부분적으로 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 */
}
<body>미터법 단위 대신 코드 "rem"단위 (의 스타일 포함 )를 사용합니다. "%"는 변경되지 않습니다. 모든 배경에 대해 배경 크기를 설정하십시오. 다른 요소에 상속되는 본문의 글꼴 크기를 정의합니다.
1.0 이외의 확대 / 축소를 실행하는 조건이 발생하면 태그의 글꼴 크기를 변경합니다 (CSS 또는 JS를 통해).
예를 들면 :
@media screen and (max-width:320pt)
{
html
{
font-size: 0.5mm;
}
}
이는 JS에서 clientX 및 드래그-드롭 이벤트 동안 위치 지정 문제없이 zoom : 0.5와 동일합니다.
미디어 쿼리에 "rem"을 사용하지 마십시오.
실제로 확대 / 축소가 필요하지 않지만 경우에 따라 기존 사이트에 대해 더 빠른 방법을 사용할 수 있습니다.