반응형
Chrome 기기 모드 에뮬레이션 미디어 쿼리가 작동하지 않음
어떤 이유로 장치 에뮬레이션 모드가 내 미디어 쿼리를 읽지 않습니다. 부트 스트랩으로 만든 내 사이트를 포함한 다른 사이트에서는 작동하지만 처음부터 사용중인 미디어 쿼리에서는 작동하지 않습니다 (미디어 쿼리 버튼을 클릭하면 버튼이 파란색으로 바뀌지 만 미디어 쿼리는 표시되지 않음). 아래 테스트 파일. 이것은 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>
내 페이지에 메타 태그를 추가하여이 문제를 해결했습니다.
<meta name="viewport" content="width=device-width">
받아 들여진 대답은 나를 위해하지 않았으며 또한 추가해야 minimum-scale=1했습니다.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
Chrome의 기기 에뮬레이션은 여전히 WIP입니다. 솔직히 말해서 너무 빨리 Chrome에 푸시했다고 생각합니다. Canary (Chrome 베타 브라우저)를 사용하여 에뮬레이션을 테스트 해보세요. Chrome에서보다 훨씬 더 잘 작동합니다.
나를 위해 작동합니다.
Just put a viewport meta tag in the head section of your page. See example:
<head>
<!--include the following meta tag to make chrome dev tools recognize media queries: -->
<meta name="viewport" content="width=device-width">
</head>
참고URL : https://stackoverflow.com/questions/26888751/chrome-device-mode-emulation-media-queries-not-working
반응형
'program story' 카테고리의 다른 글
| 목록 항목을 가장 좋은 방법으로 바꾸는 방법 (0) | 2020.10.18 |
|---|---|
| Espresso에 대화 상자가 표시되는지 확인 (0) | 2020.10.18 |
| 배열 또는 목록이 기본적으로 C #에서 참조로 전달됩니까? (0) | 2020.10.18 |
| PostgreSQL : 명령 줄에서 매개 변수를 전달하는 방법은 무엇입니까? (0) | 2020.10.18 |
| @Transactional 주석. (0) | 2020.10.18 |