Div 모바일 브라우저에서 너비가 균등하게 조정되지 않습니다.

브라우저 창의 전체 너비에 걸친 머리글 머리글이있는 응답하지 않는 웹 사이트를 구축하고 있습니다. DIV의 너비가 100 % 인 div 안에는 머리글, 탐색 및 바닥 글 내용이 들어있는 1000px 너비의 div가 중첩되어 있습니다.Div 모바일 브라우저에서 너비가 균등하게 조정되지 않습니다.

내 문제는 모바일 장치에서 사이트를 볼 때 탐색 및 바닥 글이 사이트의 머리글 및 주요 영역보다 약간 작은 크기로 축소된다는 것입니다.

내비게이션과 바닥 글이 영향을 받는다는 것은 이상한 점입니다 (동일한 접근법으로 구축 된 헤더에 문제가없는 것).

모든 것을 비례에 맞게 조정하려면 어떻게해야합니까? 사이트 전체의 너비와 모든 주요 div의 너비가 1000px이므로 휴대 기기에서 크기가 다른 이유는 무엇입니까? 여기

http://www.test-site.co.nf 코드 샘플입니다 : 여기

사이트의 URL입니다

HTML :

</head> 

<body> 
<div id="container"> 
<div id="header"> 
<div id="header-content"> 
<div id="logo"> 
<a href="index.html"><img src="img/ama-party-rentals-logo.png" height="98" width="500"/></a> 
</div> 
<div id="social-icons"> 
<a href="" target="_blank"><img class="social" src="img/icons/facebook.png" height="40" width="40"/></a> 
<a href="" target="_blank"><img class="social" src="img/icons/googleplus.png" height="40" width="40"/></a> 
</div> 
</div> 
</div> 
<div id="nav-bar"> 
<div id="nav"> 
<ul id="ul-nav"> 
<li><a href="">Home</a></li> 
<li><a href="">Products</a></li> 
<li><a href="">Company</a></li> 
<li><a href="">Past &nbsp; Events</a></li> 
<li><a href="">Contact &nbsp; Us</a></li> 
<li><a href="">Francais</a></li> 
</ul> 
</div> 
</div>

CSS : 나는 두 문제를 볼 수 있습니다

#header { 
    background-color:#84B13F; 
    width:100%; 
    height:150px; 
    border-bottom-style:solid; 
    border-bottom-color:#648830; 
    border-bottom-width:5px; 




} 

#header-content 
{ 
    width:1000px; 
    height:150px; 
    text-align:center; 
    margin:auto; 
    background-image:url('img/top-banner.png'); 


} 

#nav-bar 
{ 
    width:100%; 
    height:50px; 
    background-color:#84B13F; 
    border-bottom-style:solid; 
    border-bottom-color:#648830; 
    border-bottom-width:5px; 

} 

#nav 
{ 
     clear:both; 
     margin:auto; 
     height:50px; 
     width:1000px; 
     text-align:center; 

}

출처

2014-02-23 Jvanni

jsFiddle에 코드를 추가하여 해결할 수 있는지 알아볼 수 있습니까? – Ismatjon

안녕하세요, 저는 어제 밤 대답을 알아 냈습니다. 나는 새로운 사용자이기 때문에 오늘까지 답변을 게시 할 수 없었습니다. 그래도 응답 주셔서 감사합니다! – Jvanni

답을 써서 다른 사람들이 그 혜택을 얻을 수 있도록 – Ismatjon

당신의 대지.

1) css cass boxes-div의 너비는 1000이고 여백은 왼쪽 : 20px입니다. 실제 레이아웃 1000px + 20px 총 1020px입니다.

2) 내비게이션 크기는 1020px이지만 머리글은 1000px이므로 이동 중에도 작은 장치 (최대 화면 999px)에서 전체 크기가 조금 작아 1000px 밖에 보이지 않습니다.

헤더의 너비를 1020px로 변경하면 문제를 해결할 수 있습니다.

는

#header-content{ 
     padding: 0px 10px; 
     /**your present css**/ 
    }

은 그냥 # 헤더-내용이 패딩을 추가, 업데이트 더 구체적으로 귀하의 사이트 고정입니다. 좋아

출처

2014-02-23 21:28:21

감사합니다. 폭이 부모 div 외부로 유출되는 상자 -div를 수정했습니다. 불행히도이 문제가 해결되지 않았습니다. – Jvanni

boxes-div는 문제를 해결하지 않을 것입니다. –

머리글 및 기타 div를 너비 1020px로 변경하면 모바일 브라우저에서 사이트 배율을 전체 너비 크기로 만들 수 있지만 내비게이션 및 바닥 글의 크기가 비율에 비례하지 않는 문제는 해결되지 않았습니다. 전체 사이트를 래핑하는 div의 최소 너비를 설정하면 문제가 해결됩니다. – Jvanni

그래서 나는 그것을 알아 냈 :

내 문제는 내가 전체 사이트를 포장하는 컨테이너 DIV 있다고했다. 그 컨테이너에서는 높이를 100 %로 설정했지만 너비는 정의하지 않았습니다. 나는 최소 너비를 1020px로 설정했습니다. 더 이상 부서 지거나 컷오프가없는 사업부. 내 머리글 및 바닥 글 div는 100 % 너비로 축소되어 있지만 전체 사이트의 너비는 1020px로 조정되므로 모든 콘텐츠가 휴대 전화 및 데스크톱에서 의도 한대로 표시됩니다. 응답 한 모든 사람들에게 감사드립니다!

출처

2014-02-24 17:57:11 Jvanni

며칠 전이 솔루션을 귀하의 문제로 삼았습니다. 솔루션으로 내 대답을 선택하는 것은 정직한 작업입니다. –

문제를 해결하지 못한 헤더를 변경하라고하셨습니다. 그러나, 그것은 간접적으로 결국 내 문제를 해결할 솔루션을 찾는 방향으로 나를 이끌었다. 나는 당신에게 그것을 인정해야했고, 나는 나의 마지막 코멘트에 없었던 것에 대해 사과한다. 시간을내어 주셔서 감사합니다. – Jvanni

Div 모바일 브라우저에서 너비가 균등하게 조정되지 않습니다.

답변

관련 문제