모바일에서 CSS 비율이 올바르지 않음

Question

크기가 큰 컨테이너가 3 개 있고 모두 알파 투명 배경을 가지고 있습니다. 데스크톱에서 잘 작동하지만 태블릿 (iOS 및 Android)과 iPhone에서 % 합계가 잘못 표시됩니다.

<div style="position: fixed; top: 0; left: 0; right: 0; height: 10%;"> CONTAINER 1 </div> 
<div style="position: fixed; top: 10%; left: 0; right: 0; bottom: 5%;"> CONTAINER 2 </div> 
<div style="position: fixed; bottom: 0; left: 0; right: 0; height: 5%;"> CONTAINER 3 </div> 

나 또한 용기 (1)과 (3) 대신에 높이 bootm와 높이를 할당하려고하지만 3 상자가 1/2 픽셀에 대한 데스크톱 브라우저 N 모바일 3 상자 중복에 잘 작동하거나 조금 1/2 픽셀 공간이

모든 3 상자에 알파가있는 동일한 PNG가 있습니다. 중복되는 색상이 짙어지면 % 수정할 수 없으면 fi로 확인됩니다. 차 전용 모바일 솔루션입니다 (수)은

Answer 1

당신이 100 %

Answer 2

% 100 것은 당신의 div의 작업을 수행 설정합니다

<meta name="viewport" width="device-width" /> 

메타 태그를 설정해야합니다 합계 배경에서하지 않고 중복 alowe하기 패딩이 있나요?

기본적으로 CSS의 퍼센티지 너비에는 대부분의 브라우저에서 패딩이 포함되지 않습니다. 예를 들어 너비가 25 %이고 여백이 5px 인 경우 div의 실제 너비는 25 % + 5px입니다.

boxsizing : 경계 상자 속성은 패딩의 포함와 폭을 치료하기 위해 (주목할만한 예외가 IE7되는) 대부분의 브라우저의 원인이됩니다 - 그래서 5px 패딩 25 % 폭 DIV 25 %가됩니다

Answer 3

이 대신하려고 :

<div style="position: fixed; top: 0; left: 0; right: 0; bottom:90%;"> CONTAINER 1 </div> 
<div style="position: fixed; top: 10%; left: 0; right: 0; bottom: 5%;"> CONTAINER 2 </div> 
<div style="position: fixed; bottom: 0; left: 0; right: 0; top: 95%;"> CONTAINER 3 </div> 

prolem는 %가 전체 픽셀의 가장 가까운 숫자로 낭패에 평균 있다는 것입니다. 한 픽셀 씩 한 번 갭이 있고 한 픽셀 겹치는 한 번있을 수 있습니다.

당신이 다음 또 다른 방법으로 시도 할 수 있습니다 :

<div style="position:fixed;top:0;left:0;right:0;bottom:0;padding:10% 0 5%;box-sizing:border-box;background:yellow"> 
    <div style="position:absolute;top:0;left:0;right:0;height:10%;background:rgba(0,0,0,0.3);">5% top</div> 
<div style="height:100%;background:rgba(0,0,0,0.3);"> middle </div> 
<div style="position:fixed;right:0;left:0;bottom:0;height:5%;background:rgba(0,0,0,0.3);">bottom:5%</div> 
</div> 

codepen 또는 바이올린을 제공 양로원을, 그것은 우리 모두에게 훨씬 더 쉬웠을 것

Answer 4

그것이 작동하지 않는 것은 사실이다 모바일 브라우저하지만 안드로이드 탭에서 잘 작동 내가 가장 혼합 뷰포트 + GCyrillus 첫 번째 예 추측,

http://devilspc.in/stackoverflow/css-value.html