iPhone에서 컨테이너 DIV가 100 % 너비가 아닙니다

Question

iPhone에서 http://benoitfal.com/tess.html을보고 내 컨테이너 div가 어떻게 잘못된지 확인하십시오. 브라우저의 너비가 100 % 여야합니다.

Answer 1

iPhone이 내 375px와 비슷하다고 가정하면 100 %입니다. 이미지가 375px보다 넓기 때문에 iPhone이 축소되어 전체 페이지가 표시됩니다. 컨테이너는 여전히 100 % (내 경우에는 375 픽셀)이므로 상자가 화면의 약 절반에 불과합니다. 이미지 너비를 실제 크기 대신 100 %로 설정하면 뷰포트에 맞게 축소됩니다.

데스크톱 용 기존 솔루션 : 상자의 크기는 브라우저의 100 %이지만 각면에 6px의 여백을 추가했습니다. 불행히도 이것은 너비가 증가하여 오버플로되는 이유입니다. div에 box-sizing: border-box을 설정하면 수정됩니다. 여기 box-sizing에 대한

더 :이 CSS의 완전 허용 비트가 아직 없기 때문에 https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing

, 해당 링크의 예에 따라 브라우저 접두사를 사용해야합니다. SASS에 Compass를 사용하는 경우 @include box-sizing(border-box)을 사용할 수 있습니다.