요소 너비 : 화면 밖으로 100 %

Question

이상한 문제가 있습니다. 내 최고 메뉴를 width: 100%으로 설정했지만로드하는 동안 화면이 꺼집니다 (항상 522px로).

디버그

나는 콘솔 debugger;와 페이지로드를 중단했다. 요소의 계산 된 폭은 522 픽셀입니다. 그것에 클릭하면 width: 100%이 나에게 가져옵니다. 페이지의 모든 내용은 메뉴를 제외한 페이지 너비 내에 있습니다.

CSS

#mobile_header { 
    vertical-align: middle; 
    position: fixed; 
    background-color: #5d3026; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 50px; 
    z-index: 99998; 
    box-sizing: content-box; 
} 

이상한 부분
그것은 경계를 벗어나에만로드하는 동안. 페이지로드가 끝날 때마다 전체 화면 크기의 정상 100 %로 이동합니다. 추가적인 JS가 이에 영향을 미치지 않습니다. CSS가로드되지 않습니다 (페이지로드 일시 중지 이후). 또한 내부에서 모든 내용을 삭제했습니다. html 및 css에서 ID가 변경되었으므로 (실제로 스크립트가 영향을 미치지 않습니다), 캐시를 지 웁니다. 여전히 별난 522px (100 %에서 번역 됨)로 이동합니다.
나는 그것이 야생 장면이라는 것을 알고 있지만, (모든 브라우저에서) 그러한 상황을 일으킬 수있는 것에 대해 추측 할 수있는 사람이 있습니까?

Answer 1

, 난 아무것도 찾을 수 없습니다.
모든 헤더 파일을 분리 한 후에 만 ​​원인을 발견했습니다.
짧은 이야기 - width: 100%이 화면을 벗어나 부모 크기가 정상인 경우 콘텐츠에 정적 크기가 있어야합니다. 철저한 검색이 도움이 될 것입니다.

Answer 2

fixed 요소의 경우는 모바일 브라우저의 스케일을 조정에 대한 HTML에 당신은 meta viewport이 100 % 폭

#mobile_header { 
    vertical-align: middle; 
    position: fixed; 
    background-color: #5d3026; 
    top: 0; 
    left: 0; 
    right: 0; /* <= */ 
    height: 50px; 
    z-index: 99998; 
    box-sizing: content-box; 
} 

Answer 3

에 대한 left: 0 및 right: 0를 사용할 수 있습니까? 내 헤더 (콘텐츠를 별도의 파일이) 내가 페이지에서보고 너무 정적 길이 (50em)와 visibility:hidden와 다른 항목을 한 것으로 밝혀졌다 끝에

<meta name="viewport" content="width=device-width, initial-scale=1">