모바일 사파리에서 회전 문제를 일으키는 뷰포트 설정

Question

먼저 다른 질문에서 본 줌 문제가 아닙니다. 또한 iOS 6을 실행하는 iPhone 4를 사용하여 테스트하고 있습니다. 모바일 프로젝트를 진행하면서 viewport 태그와 모바일 사파리로 문제를 발견했습니다. 내가 얻을 수있는 모든 것을 기본 코드로 증류했다. I는이 설정 파라미터 가지고

• 폭 = 기기 폭
• 높이 = 장치 높이
• 초기 스케일 = 1.0
• 최대 스케일 = 1.0
• 사용자 확장 = 아니오

화면을 회전 할 때까지 모두 정상적으로 작동합니다. 아무것도 크기가 조정되지 않고 검은 색 막대가 오른쪽에 나타나 틈을 채 웁니다 (스크린 샷 참조). height=device-height을 완전히 제거하면 문제가 사라집니다. 그러나이 매개 변수를 사용해야합니다. 그렇지 않으면 다른 질문을해야 할 것입니다.

검은 색 막대가 그대로 남아 있으며 왼쪽 및 오른쪽으로 스크롤 할 수 있습니다. 이것은 매우 이상한 문제입니다. width=device-width을 제거하면 예상치 못한 일이 발생합니다. 나는 당신이 그것을 시도하려는 경우 여기에 코드를 가지고 : 여기 http://toastd.net/viewport.html

스크린 샷입니다 : 여기

가 잘 작동 세로 모드가 :

가로 모드로 회전 할 때

그런 다음 세로 모드로 다시 회전

Answer 1

나는 이것이 Safari의 버그라고 생각하지만, 해결 방법을 찾았습니다. 그것은 특정 요소와 스타일과 관련이 있습니다. 제거 프로세스에 의해, 나는 그것을 "기분을 상하게하는"몇 가지 HTML 엘리먼트로 좁혔다. width: 120px;과 같은 다른 정적 너비뿐만 아니라 일부 요소 및 CSS 스타일에서 width: 100%;을 삭제하면 문제가 감소하기 시작합니다. 오른쪽의 여백이 작아졌지만 완전히 사라지지 않았기 때문에 "줄이기 시작"이라고 말합니다. 그런 다음 마진과 패딩과 같은 다른 CSS 속성을 사용하기 시작했습니다. 일부 요소에서 왼쪽 및 오른쪽 패딩을 제거한 후 문제가 마침내 사라졌습니다. 그러나 이러한 스타일은 이유가 있었기 때문에 이것은 받아 들일 수 없었습니다.

해결 방법은 CSS의 모든 내용을 컨테이너 요소에 랩핑하고 적절하게 크기를 설정하고 overflow: hidden;을 설정하는 것이 었습니다. overflow: hidden;을 body 또는 html 태그로 설정하면 작동하지만 모바일 사파리에서 수직 스크롤을 사용하면 펑키 한 작업을 수행 할 수 있습니다. 필자의 경우에는 이미 컨테이너 요소가 있었으므로이 컨테이너 요소에 overflow 속성을 추가해야했습니다.

내가 말했듯이 이것은 사파리의 버그라고 생각합니다. 가로 모드에서 세로 모드로 회전 할 때 모든 것은 세로 모드에 맞게 다시 조정되어야합니다. 시각적으로 모든 것이 올바르게 크기가 조정 된 것처럼 보입니다. 그러나 Safari는 무언가의 크기가 제대로 조정되지 않았으므로 실제 페이지보다 더 넓은 페이지를 표시해야합니다. Android 기기의 Chrome에서는 정상적으로 작동합니다. 또한 어떤 요소가 페이지를 장치 화면 너비 이상으로 늘어나게 할지도 모르는 다른 배경색과 테두리를 추가했습니다. 시각적으로, 명백한 범인이 없었습니다.

width: 100% 더하기 padding 문제 일 수 있다고 생각하는 경우 동일한 생각이 들었습니다. 그러나 너비 나 여백/패딩 만 삭제하면 문제가 해결 될 수 있습니다. 하나의 요소가 화면 가장자리를 넘어 앉아 있지 않았습니다. 거기에 빈 공간 만있었습니다.

Answer 2

목 e 메타 태그는 뷰포트에 대한 규칙을 정의하는 데 도움이되지만 방향 변경을 처리하기 위해 시각적 스타일을 적용해야합니다. 이러한 CSS는 시도 값 보내기 프로젝트를 계속하는 데 도움이되는 좋은 자원을 원하는 경우

body { width: 100%; height: 100%; } 

는, 폰갭은 포크 할 수 GitHub의에 선발 응용 프로그램을 가지고있다.
PhoneGap Start