모바일 장치에서 웹 사이트 페이지 크기를 보통 데스크톱 크기로 설정하십시오.

Question

현재 사이트를 다시 코딩하는 중간 단계이며 모바일 호환성 문제가 발생했습니다.

모바일 장치 (here)를 통해 현재 웹 사이트를 보는 경우 웹 사이트의 너비와 높이가 세로 및 가로로 스크롤 할 수있는 데스크톱에서 볼 때와 같은 일반적인 크기임을 알 수 있습니다.

그러나, 나의 새로운 사이트 (bootswatch에서 부트 스트랩 슬레이트 사용 - bootswatch.com/slate/) 모바일 장치에서 미리 볼 때 고정 모바일 장치 폭에 모두 집어 넣은 시도를 (here)

아래 줄을 추가하려고했지만 차이점은 없습니다.

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

html, 
body { 
    height: 100%; 
    width: 100%; 
    } 

모바일 장치에서 현재 사이트와 동일한 차원으로 새 사이트를 표시 할 수있는 방법이 있습니까?

감사합니다.

Answer 1

당신이 보는 것은 내가 추측하는 부트 스트랩의 반응적인 행동입니다. 그리고 imho는 휴대 기기의 기기 너비에 콘텐츠를 맞추는 것이 타당합니다. Disabling bootstrap responsiveness

UPDATE :

수평 스크롤 추가 콘텐츠를 만들려면 :

html, body { 
    overflow: auto; 
} 

스타일 시트에 현재 부트 스트랩 프로젝트에 반응하는 기능을 사용하지 않도록 설정하는 방법에 대한 읽을 수

.

문제가 해결되지 않으면 선언에 !important을 추가하려고 :

html, body { 
    overflow: auto !important; 
} 

참고 : 나는 이 가장 효율적인 방법 CSS의 성능 현명 아니라, CSS의 당신의 이해 수준 부여 귀하가 bootstrap.css를 직접 변경하는 것은 너무 많을 것으로 생각됩니다.

Answer 2

부트 스트랩의 경우 응답을 비활성화하는 단계는 다음과 같습니다. 이 기능을 비활성화하여 템플릿/CSS를 다운로드 할 수 있습니다. http://getbootstrap.com/getting-started/

단계가 비활성화 확인 페이지 응답 생략 예를 들어, 폭, 하나의 폭이 각 격자 계층에 대한 .container의 폭을 무시 하는 CSS 문서에서 언급 된 뷰포트 :! 970 픽셀 중요합니다; 이것이 기본 부트 스트랩 CSS 뒤에 오는 지 확인하십시오. 선택적으로 미디어 쿼리 또는 일부 선택기와 함께! important를 피할 수 있습니다. 네비게이션 바를 사용하는 경우 모든 네비게이션 축소 및 확장 동작을 제거하십시오. 격자 레이아웃의 경우 중/대형 클래스에 추가하여 또는 대신하여 .col-xs- * 클래스를 사용하십시오. 초소형 장치 그리드는 모든 해상도에 따라 확장 될 수 있으므로 걱정하지 마십시오. IE8에 대한 Respond.js가 필요합니다 (Google의 미디어 쿼리가 아직 처리 중이므로 처리해야하므로). 이렇게하면 부트 스트랩의 "모바일 사이트"측면이 비활성화됩니다.