Запросы Мультимедиа Эмуляции Режима Устройства Chrome Не Работают

по какой-то причине режим эмуляции устройства не читает мои медиа-запросы. Он работает на других сайтах, включая мои собственные сайты, которые я сделал с помощью bootstrap, но он не работает на медиа-запросах, которые я использую с нуля (нажатие кнопки media queries превращает кнопку в синюю, но медиа-запросы не отображаются). Тестовый файл ниже. Это ошибка в 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>
2 53
css google-chrome media-queries developer-tools

2 ответа:

я исправил эту проблему, добавив мета-тег на мою страницу:

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

эмуляция устройства в Chrome по-прежнему является НЗП. Честно говоря, я думаю, что они подтолкнули его к Хрому слишком рано. Попробуйте использовать Canary (браузер Chrome beta) для тестирования эмуляции, я считаю, что он работает намного лучше, чем в Chrome.

6