모바일 사파리 흰색 패딩/오른쪽 여백

다른 주제를 확인했지만이를 파악할 수 없습니다. 이 사이트를 여기에서 테스트하십시오 : http://www.mf.jlscs.com/모바일 사파리 흰색 패딩/오른쪽 여백

모바일 사파리의 세로보기에서는 오른쪽으로 스크롤하여 흰색 패딩을 비울 수 있습니다. 나는 이것을 원하지 않는다.

가로보기에서는이 스크롤이 없으므로 원하는대로 렌더링됩니다.

나는이 신비한 추진을 일으키는 것을 전혀 모릅니다. overflow-x를 제거하려고 시도했지만 트릭을 수행하지는 않습니다. 각 컨테이너에서 overflow-x를 제거하면 페이지의 모든 컨테이너에서 이와 동일한 결과가 발생합니다. 어떤 아이디어?

출처

2011-12-21 ShawnB

내 아이폰에서 사이트를 보았는데 오른쪽으로 스크롤 할 수 없었습니다 ... 예상대로 작동하는 것 같았습니다. – Fred

대부분의 구조 요소가 신체 너비를 초과하여 발생합니다. width: 100%; padding 20px;과 같은 코드 나 그 코드가 쏠 수있는 코드를 찾아보십시오.

모든 기본 div에 빨간색 테두리를 두어 주범이 무엇인지보고 가장자리로 확장하는 것이 좋습니다.

출처

2011-12-21 14:34:50 Indranil

-3

나는 파이어 폭스 웹 개발자를 다운로드하고 단지 블록 레벨 요소 개요> 개요를 켜기 건의 할 것입니다.

출처

2012-02-03 20:32:13

일부 div에만 테두리를 추가하면 레이아웃이 변경 될 수 있습니다. 당신의 CSS의 바닥이 추가 하면 불량 요소를 찾을 수 있습니다 :

* { 
    background: #000 !important; 
    color: #0f0 !important; 
    outline: solid #f00 1px !important; 
}

나는 또한이 쉽게 사이트에 사용할 수 있도록 자바 스크립트를 통해이 작업을 수행 북마크를했다. http://wernull.com/2013/04/debug-ghost-css-elements-causing-unwanted-scrolling/

출처

2013-08-09 19:29:01

정확히 내가 무엇을 찾고 있었습니까. Safari의 웹 검사기에이 코드를 추가하려고하면 문제가되는 것으로 나타났습니다. 고맙습니다! – mhulse

이것은 환상적인 코드입니다! 감사! – Raccoon

사실,이 문제는 어떤 이유로 문서 너비를 벗어나는 "가짜"요소 때문입니다.

위의 CSS를 사용하는 방법 중 하나는 시도하지 않았지만 테두리를 사용하여 요소를 발견하는 것이 얼마나 쉬운 지 잘 모르겠습니다. 더 큰

Array.prototype.filter.call(document.querySelectorAll('*'), function (node) { return node.clientWidth + node.offsetLeft > document.documentElement.clientWidth });

이 (왼쪽에서의 거리) 오프셋 폭 + whos는 모든 요소의 배열을 반환합니다

다른 접근 방식이 그들을 찾기 위해 콘솔에서 코드를 JS 실행하는 것입니다 clientWidth보다

그런 다음 요소를 검사하여 왜 이러한 동작을하는지 알아야합니다. 제 경우 바닥 글의 너비가 문서 너비보다 20px 커야하는 width:100% 및 이 있습니다.

재미있게도, 이것은 iPhone에서만 발생했으며 Androids에서는 발생하지 않았습니다.

출처

2016-07-21 08:43:45

모바일 사파리 흰색 패딩/오른쪽 여백

답변

관련 문제