로테이션과 함께 작동하는 ios & android와 호환되는 적절한 뷰포트 설정하기

Question

질문을받는 데있어 다른 부분을 보았습니다.하지만 iOS에서 제대로 작동하는 간결한 답변을 아직 찾지 못했습니다. & android (필자는 iPad, iPad2, Android 폰 및 iPod Touch로 테스트 중입니다.) 그래서 제가 가지고있는 것은 훌륭하게 작동하는 확장 가능한 사이트입니다. 사이트의 최소 너비가 480px이고 최대 너비가 1014px이고 inbetween는 그대로 유지되도록 지정할 수 있기를 원합니다. 여기에 내 현재 코드 :

viewportWidth이 window.screen.width 의 minWidth하여 계산이 (480) 최대 너비가 변수 변수입니다 (1014)

아래 코드는 장치 회전 이벤트에 호출되는 트리거되고 있습니다.

참고 : 내 코드 작업을 수행, 내가 어떤 도움은 매우 감사

을 시도 것을 보여주기 위해 아래의 소스 내 주석 코드의 일부를 떠난,하지만 난을 확대해야하는 작은 장치에서 찾을 페이지가 뷰포트 외부에있을 때 (비록 그것이 가능하지 않아도) 스미지 (scidge)를 내 보냅니다. 아무도 이제까지 대답하지

/*Set initial Sizes*/ 
     if(viewportWidth > maxWidth){ 
      //dont adjust since it may be desktop 
      viewportWidth = maxWidth; 
      $('meta[name="viewport"]').attr('content', 'initial-scale=1.0; width=device-width' ); 


      //viewport = document.querySelector("meta[name=viewport]"); 
      //viewport.setAttribute('content', 'width=' + maxWidth + '; initial-scale=1.0; user-scalable=1;'); 

     }else if(viewportWidth > minWidth && viewportWidth < maxWidth){ 
      $('body').removeClass('mobile'); 
      $('body').addClass('desktop'); 
      $('meta[name="viewport"]').attr('content', 'initial-scale=1.0; width=device-width'); 

      //viewport = document.querySelector("meta[name=viewport]"); 
      //viewport.setAttribute('content', 'width=' + window.screen.width + '; initial-scale=1.0; user-scalable=1;'); 

      isMobile = 0; 

     }else if(viewportWidth <= minWidth){ 

      if(/iPhone|iPad|iPod/i.test(navigator.userAgent) ) { 
       $('meta[name="viewport"]').attr('content', 'initial-scale =' + (window.screen.width/minWidth).toFixed(2) ); 
      }else{ 
       $('meta[name="viewport"]').attr('content', 'initial-scale = ' + (window.screen.width/minWidth).toFixed(2) + '; width=device-width'); 
      } 

      //viewport = document.querySelector("meta[name=viewport]"); 
      //viewport.setAttribute('content', 'initial-scale = ' + (window.screen.width/minWidth).toFixed(2) + '; width=' + minWidth + '; initial-scale=1.0; user-scalable=1;'); 

      $('body').removeClass('desktop'); 
      $('body').addClass('mobile'); 

      //$('#pageBody').width(minWidth); 
      viewportWidth = minWidth ; 

      isMobile = 1; 

     } 

Answer 1

때 수정이에 몇 번 ... 회전, 그래서 이것은

이

1, CSS를 2를 사용하여 미디어 쿼리,이 스크립트를 사용하면 문제를 해결하기 위해 노력하고 뭔가

<meta id="Viewport" name="viewport" width="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"> 

<script type="text/javascript"> 
$(function(){ 
if(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)) { 
    var ww = ($(window).width() < window.screen.width) ? $(window).width() : window.screen.width; //get proper width 
    var mw = 480; // min width of site 
    var ratio = ww/mw; //calculate ratio 
    if(ww < mw){ //smaller than minimum size 
    $('#Viewport').attr('content', 'initial-scale=' + ratio + ', maximum-scale=' + ratio + ', minimum-scale=' + ratio + ', user-scalable=yes, width=' + ww); 
    }else{ //regular size 
    $('#Viewport').attr('content', 'initial-scale=1.0, maximum-scale=2, minimum-scale=1.0, user-scalable=yes, width=' + ww); 
    } 
} 
}); 
</script>