Chrome 기기 모드 에뮬레이션 미디어 쿼리가 작동하지 않음

Question 1

어떤 이유로 장치 에뮬레이션 모드가 내 미디어 쿼리를 읽지 않습니다. 부트 스트랩으로 만든 내 사이트를 포함한 다른 사이트에서는 작동하지만 처음부터 사용중인 미디어 쿼리에서는 작동하지 않습니다 (미디어 쿼리 버튼을 클릭하면 버튼이 파란색으로 바뀌지 만 미디어 쿼리는 표시되지 않음). 아래 테스트 파일. 이것은 Chrome의 버그입니까, 아니면 파일에서 변경해야 할 사항이 있습니까?

<!DOCTYPE html>
<!--
Media Queries Example 1
Sam Scott, Fall 2014
-->
<html>
<head>
    <title>MQ Example 1</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body { font-family: sans-serif; }
        h1 { color: red; } 
        h2 { color:blue; }
        p { color:green; }

        @media (max-width: 768px) and (min-width: 481px) {
            h1 { color: green; } 
            h2 { color:red; }
            p { color:blue; }
        }

        @media (max-width:479px), print { 
            h1,h2,p { color:black; }
        }

        @media print {
            body { font-family: serif; }
        }


    </style>
</head>
<body>
    <h1>I'm a first level heading</h1>
    <p>I'm a paragraph.</p>
    <h2>I'm a second level heading</h2>
    <p>I'm another paragraph.</p>
</body>
</html>

Question 2

내 페이지에 메타 태그를 추가하여이 문제를 해결했습니다.

 <meta name="viewport" content="width=device-width">

업데이트 (2019 년 12 월) :

다음과 같이 초기 배율과 최소 배율을 설정해야 할 수도 있습니다.

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

Question 3

받아 들여진 대답은 나를 위해하지 않았으며 또한 추가해야 minimum-scale=1했습니다.

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

Question 4

Chrome의 기기 에뮬레이션은 여전히 WIP입니다. 솔직히 말해서 너무 빨리 Chrome에 푸시했다고 생각합니다. Canary (Chrome 베타 브라우저)를 사용하여 에뮬레이션을 테스트 해보세요. Chrome보다 더 잘 작동합니다.

Question 5

나를 위해 작동합니다.

페이지의 헤드 섹션에 뷰포트 메타 태그를 넣으십시오. 예를보십시오 :

 <head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

Question 6

코드에 다음 메타 태그를 포함하세요.

<head>
  <!--include the following meta tag to make chrome dev tools recognize media queries: -->
  <meta name="viewport" content="width=device-width">
</head>

스 니펫 확장

Question 7

화면 크기에 따라 동일한 규칙 집합에 대해 둘 이상의 구현이있는 경우 다음과 같은 사실을 알 때까지 동일한 문제가 계속 발생했습니다.

동일한 미디어 쿼리에 대해 최소 및 최대 너비를 모두 지정하여 후속 쿼리에서 덮어 쓰지 않도록합니다.

@media screen and (min-width:9px , max-width:9px) {

    css.selector { 

        style rules gets applied : in this range of screen sizes ;

    } 

}


css.selector{


    the other style get applied : starting from 10px ;

}

또는 모두에 대해 하나 이상의 중단 점을 설정하십시오.

@media screen and (min-width:9px) {

    some styles get applied : starting from this point ;

}

}

@media screen and (min-width:99px) {

    some styles gets applied : starting from this point ;

}

}