페이지 크기 조정 호환성 처리 방법(zoom,Firefox 불 여우 브 라 우 저)

4154 단어 불 여우브 라 우 저호환성zoom
1.페이지 크기 조정 에 사용 되 는 기술 포인트
（1）zoom

zoom：normal | <number> | <percentage>
   ：normal
   ：    
   ：
크기 조정 비율 을 부동 소수점 과 백분율 로 정의 할 수 있 습 니 다.
zoom 브 라 우 저 호환성:http://caniuse.com/#search=zoom

zoom 의 호환성:Firefox 시 리 즈 는 지원 되 지 않 습 니 다.
（2）transform
transform:scale(1.1,1.1);
scale(x,y)는 2D 크기 조정 변환 을 정의 합 니 다.
호환성

transform 은 CSS 3 에 속 하 며 호환성:IE6-8 은 지원 되 지 않 습 니 다.
2.페이지 크기 조정 예제 코드

<!DOCTYPE html>
<html>

 <head>
  <meta charset="utf-8" />
  <title>         （zoom,Firefox     ）</title>
  <style>
   * {
    margin: 0;
    padding: 0;
    font-size: 14px;
    font-family: "microsoft yahei";
    box-sizing: border-box;
   }
   
   p {
    text-indent: 2em;
    line-height: 25px;
   }
   
   .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.42857143;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
   }
  </style>
 </head>

 <body>
  <button type="button" id="pageBig" class="btn">    </button>
  <button type="button" id="pageSmall" class="btn">    </button>
  <p>
           ，    ，                   。                   ，                  ，               ，     HTML CSS  JavaScript/ajax，         HTML5、CSS3，  SVG 。
  </p>
  <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>

  <script type="text/javascript">
   $(function() {
    //         
    var zoomNum = 1;
    var $body = $('body');
    //      
    function PageBig() {
     zoomNum += 0.1;
     //  firefox     
     //  transform-origin:center top  ，          
     $body.css({
      '-moz-transform': 'scale(' + zoomNum + ')',
      'transform-origin': 'center top'
     });
     $body.css('zoom', zoomNum)
    }
    //      
    function PageSmall() {
     zoomNum -= 0.1;
     //  firefox     
     //  transform-origin:center top  ，          
     $body.css({
      '-moz-transform': 'scale(' + zoomNum + ')',
      'transform-origin': 'center top'
     });
     $body.css('zoom', zoomNum);
    }
    $('#pageBig').click(function() {
     PageBig();
    });
    $('#pageSmall').click(function() {
     PageSmall();
    });
   })
  </script>
 </body>

</html>
효과:

주의:
transform 변환 의 기준 위치 속성 은 transform-origin 이 고 transform-origin 속성 기본 값 은 상하 좌우 중간 위치 입 니 다.즉,:
transform-origin:50% 50% 0
페이지 상단 에 보이 지 않도록 transform-origin 을 다시 설정 할 수 있 습 니 다.
transform-origin: center top;
이 페이지 의 크기 조정 호환성 처리 방법(zoom,Firefox 불 여우 브 라 우 저)은 바로 편집장 이 여러분 에 게 공유 한 모든 내용 입 니 다.참고 하 시기 바 랍 니 다.여러분 들 도 많이 응원 해 주시 기 바 랍 니 다.
jQuery 마우스 액자 구현 및 상자 내 데이터 선택 인 스 턴 스 코드
canvas 를 사용 하여 이미지 편집 을 위 한 인 스 턴 스

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage