모바일 - 사파리의 방향 변경 후 추가 너비를 얻지 못하게하는 방법

내 iPad의 모바일 사파리에서 기기 방향을 변경 한 후에 이상한 행동을합니다. 내가 세로 방향으로 내 아이 패드로 URL을 가서 어떤 슬쩍 제스처를 만들 때모바일 - 사파리의 방향 변경 후 추가 너비를 얻지 못하게하는 방법

http://fiddle.jshell.net/eterps/jsTqj/show/

<!DOCTYPE HTML> 
<html> 
    <head> 
     <meta name="viewport" content="initial-scale=0.7" /> 
     <style> 
      #block { 
       border: 1px solid red; 
       background-color: yellow; 
       font-size: 400%; 
       width: 700px; 
       height: 500px; 
      } 
     </style> 
    </head> 
    <body> 
     <div id="block">Hello world!</div> 
    </body> 
</html>

당신은이 URL에서 모바일 사파리에서 볼 수 있습니다 여기 내 테스트 파일입니다 페이지가 올바르게 스크롤되지 않습니다.

그러나 장치를 가로 모드로 돌리고 스 와이프 제스처를 만들면 명백한 이유없이 오른쪽에 여분의 공간이 생겼습니다.

하지만 모바일 사파리를 다시 시작하고 가로 방향으로 항상 URL로 이동하면 오른쪽에 여분의 공간이없는 것입니다.

오리엔테이션을 변경 한 후에 왜 오른쪽에 여분의 공간이 나타 납니까? 어떻게 그것을 막을 수 있습니까?

출처

2011-03-08 Erik

이동할 때 모바일 사파리는 새로운 방향과 일치하도록 뷰포트의 크기를 조정합니다.

출처

2011-03-17 09:45:24 Erik

모바일 사파리가 화면 중앙에 뷰 위치를 유지하려고합니다. window.outerWidth 및 window.scrollX 매개 변수를 통해 확인할 수 있습니다. 페이지를로드하고 세로 방향 -> 가로 -> 세로 방향을 변경 한 후에 달라집니다.

나는이 주제에 다른 논의와 관련이 생각 Mobile site resize on orientation change not working in Safari

당신은 스크립트를

$(window).bind('orientationchange', function() { 
    var oldWidth = $('body').innerWidth(); 
    $('body').width(oldWidth + 1); // Force redraw 
    $('body').width(''); // Return to previous state in case if width set by css, otherwise use $('body').width(oldWidth); 
});

에 따라 페이지와 공백을 숨기는 다시 그리기를 강제 할 수

출처

2013-09-18 20:53:24

모바일 - 사파리의 방향 변경 후 추가 너비를 얻지 못하게하는 방법

답변

관련 문제