휴대 전화에서 웹 사이트가 이상하게 보입니다.

Question

My website이 내 Nexus 5에서 이상하게 보입니다 (아래 이미지 참조). 테스트 할 수는 없지만 다른 휴대 전화에서도 마찬가지입니다. @media 쿼리 때문일 것입니다. 그러나, 내가 다른 화면 너비와 일반 PC에서 이것을 시도한다면, 그것이 있어야 것처럼 보입니다.

두 질문 :

• 어떻게이 문제를 해결할 수 있습니까?
• 내 PC에서이 동작을 테스트 할 수있는 방법이 없으므로 CSS를보기 위해 방화 녀를 사용할 수 있습니까? @media 쿼리 내 CSS 파일처럼 보이게하는 방법

입니다 :

@media (min-width: 600px) { 
    .col-lg-3 { 
    width: 50%; 
    float: left; 
    } 
} 

@media (min-width: 900px) { 
    .col-lg-3 { 
    width: 33.33%; 
    float: left; 
    } 
} 

@media (min-width: 1000px) { 
    .col-lg-3 { 
    width: 25%; 
    float: left; 
    } 
} 

@media (min-width: 1000px) { 
    .container { 
    max-width: 980px; 
    } 
} 

.container는 그림자와 흰색 상자가, 그리고는 .COL-LG-3 제품 박스입니다 (정상 화면에서 연속 4 개). .container는 작은 화면에서 화면을 채우고 큰 화면에서는 980 픽셀 너비 여야합니다. 그러나, 그것은 훨씬 작은 모습, 그리고 .COL-LG-3

Answer 1

@ zazvomiki를 정교하게하려면 뷰포트 메타 태그를 구현하고 뷰포트 너비가 화면 너비와 같아야한다는 것을 지정하여이 동작을 수정할 수 있습니다. 웹 페이지의 요소에 다음과 같은 장소 :

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

당신이 개발자 도구를 사용할 수 있습니다 당신은 안드로이드 크롬과 원격 디버깅을 사용할 수있는 PC에서이 동작을 테스트 할 수 있습니다 질문의 두 번째 부분에 대답하기 위해 귀하의 PC에서 귀하의 휴대 전화 페이지를 조사하십시오. 그런 다음 Chrome에서 일반적으로하는 것처럼 다양한 아이디어를 테스트하기 위해 실시간으로 변경할 수 있습니다. 크롬

원격 디버깅 : 뷰포트에서 https://developer.chrome.com/devtools/docs/remote-debugging

Answer 2

크롬 개발자 도구에 내장 된 모바일 아주 좋은 에뮬레이션 도구가 100 %의 폭을 것 같습니다. https://developer.chrome.com/devtools/docs/device-mode

하위 메뉴 UL도 너비가 정의되어 있으므로 메뉴 막대가 컨테이너보다 넓어 질 수 있습니다. 메뉴 텍스트의 여백을 확인하십시오.