가로 스크롤 막대 문제 미디어 쿼리 사용

저는 미디어 쿼리를 가지고 놀고 있으며 모바일 화면 용으로 개발하기 시작했습니다. 나는 상대적으로 처음 페이지를 어떻게 만들지 만, 화면의 크기를 < 480px로 바꿀 때 가장 아래에 가로 스크롤 막대가 생깁니다. 아직 모바일 장치에서이 테스트를 수행하지는 않았지만 동일한 오류가 발생한다고 가정합니다.가로 스크롤 막대 문제 미디어 쿼리 사용

사이트는 다음과 같습니다 http://brad.sebdengroup.com/newOdynSite/index.php

이 사이트를 열고 오류를 다시 < 480 픽셀로 창 크기를 조정하고 수직으로 사용하려고 할 수 아래

출처

2012-08-08 Andy

크롬에서 나에게 잘 보이는 모바일 크기입니다. – SpaceBeers

아래로 스크롤하면 가로 스크롤 막대가 나타나지 않습니까? – Andy

죄송합니다. 그냥 보았습니다. – SpaceBeers

문제입니다 :

#main span.bold { 
    padding: 15px 20px; 
    ... 
} 
#main span{ 
    width: 100%; 
    ... 
}

이 CSS 규칙 조합은 페이지 너비보다 큰 요소를 만듭니다. 너비 100 %에는 여백, 테두리 또는 여백에 사용 된 공간이 포함되지 않습니다. 예를 들어 페이지 너비가 480px 인 경우 요소의 너비는 20px + 480px + 20px = 520px가됩니다.

이 문제를 방지하려면 별도의 요소에 폭과 패딩을 적용하고 필요에 따라 CSS를 조정할 수 있도록 추가 태그에 내용을 배치하십시오. 예 :

<span><strong>What have we done?</strong></span>

출처

2012-08-08 12:40:49

내 HTML을 건드리지 않고이 작업을 수행하려고하므로 더 자세히 살펴 봐야하지만, 너는 스팬 너비 + 패딩으로 인해 발생했다. 건배 – Andy

로 이동하기 위해 오버 플로우 엑스 : 숨겨진; < 본체 >에서 스크롤 막대를 단순히 숨 깁니다. 그러나보기 포트 외부에서 내용을 쉽게 볼 수는 없습니다.

<link rel="stylesheet" href="styles/mobile.css" media="only screen and (max-device-width: 480px)">

또는 당신이 사용할 수있는 < 메타 > 요소 : 스타일 시트 지정하기 위해 미디어 쿼리를 사용하여 모바일 장치의 경우

여기

<meta name="viewport" content="width=device-width, user-scalable=no">

출처

2012-08-08 12:05:26 Gabriel

가로 스크롤 막대 문제 미디어 쿼리 사용

답변

관련 문제