미디어 쿼리 및 CSS LESS FRAMEWORK 4

Question

less 4 프레임 워크에 CSS 기본값을 설치했습니다. 이들은 "브라우저 크기"에 따라 본문 선언을 변경하는 미디어 쿼리를 제공합니다. 내가 바탕 화면에서 내 Google 크롬 브라우저를 확장 할 때 어떤 미디어 쿼리가 실행되는지 확인할 수 있도록 본문 배경색을 변경하는 선언문을 추가했습니다.

기본 바탕 화면 색이 흰색입니다. 그렇다면 나는 타블렛 레이아웃과 모바일 레이아웃을 다음과 같이 가지고있다.

/*  Tablet Layout: 768px. 
    Gutters: 24px. 
    Outer margins: 28px. 
    Inherits styles from: Default Layout. 
----------------------------------------------------------------- 
    cols 1  2  3  4  5  6  7  8 
    px  68 160 252 344 436 528 620 712 */ 

@media only screen and (min-width: 768px) and (max-width: 991px) { 

body { 
    width: 712px; 
    padding: 10px 20px 60px; 
    background-color:yellow; 
} 
} 
/*  Mobile Layout: 320px. 
    Gutters: 24px. 
    Outer margins: 34px. 
    Inherits styles from: Default Layout. 
--------------------------------------------- 
     cols 1  2  3 
     px  68 160 252 */ 

@media only screen and (max-width: 767px) { 

body { 
    width: 252px; 
    padding: 10px 20px 60px; 
    background-color:pink; 
} 

} 

데스크톱 브라우저의 크기를 변경하면 색상이 바뀐다. 하지만 HTC 센세이션 앤드 로이드 브라우저에서 페이지를 열면 노란색이됩니다. 분명히 미디어 쿼리가 내 브라우저의 "크기"에 영향을 미치지 않습니다. 또한 브라우저 해상도가 미디어 쿼리 임계 값을 충족시키지 못하도록 휴대 전화에서 페이지 크기를 조정하고있는 뷰포트라는 것이 있다는 것을 읽었습니다. 내 미디어에 올바른 미디어 쿼리가 적용되도록이를 어떻게 수정합니까? iOS 및 안드로이드에 대한 기본과 같은 장치 폭

Answer 1

사용 만